项目总结之angular中利用input和output实现组件之间数据的传递

目前组件化思想非常盛行，近期在在项目中就用到了input和output的组件，所以就在此总结下来。话不多说，进入正题，先看代码。
html：

<div class=“shop” [class.actived] ="hide">
   <div *ngIf="shopImg" class="shop-image"><img src="assets/shop/{{shopImage}}"/></div>
   <div *ngIf="hide" (click)="hideShop()" class="hide"></div>
   <div *ngIf="show" (click)="showShop()" class="show"></div>
</div>

ts：

import {component，Input，Output，EventEmitter} from “@angular/core”;
import{user} from "product/user";
@Component({
     selector:"shop",
     templateUrl:"shop.html"
}) 
export class shop{
hide: boolean = false;
show: boolean = false;
 constructor(
 public user:user
 ){
 }
 // 重点(Input是传入的变量，Output是输出的变量)
 @Input()  shopImage:string = "";
 @Output() shopMaskFlag = new EventEmitter();

show(){
this.show = false;
this.hide = true;
this.shopMaskFlag.emit(true);
}

hide(){
this.show = true;
this.hide = false;
this.shopMaskFlag.emit(false);
}
 // emit的用法下面会讲到
}

引入到其他的ts和html进行使用的时候
注意在ts文件中我们用到了selector:“shop”,所以shop作为子组件，在html中使用的时候如下：

<shop #shopMask [shopImage]="'signShop.png'" (shopMaskFlag)="showMaskFlag($event)" class="addCom"></shop>
<div *ngIf="showPageMask" class="mask" (click)="showMask.hideGuide()"></div>

下面来看一下这段代码的意思，首先shop标签，这个是根据selector:“shop"来写的，表明这个子组件是通过这个标签选择器shop传进来的。然后[shopImage]=”‘signShop.png’" 是根据@Input() shopImage:string = “”;作为参数传进来的。(shopMaskFlag)="showMaskFlag( $event)"是根据this.shopMaskFlag.emit(false);来的，由于@Output() shopMaskFlag = new EventEmitter();然后使用了EventEmitter的emit方法（发射也就是向外输出暴露的方法），另外(shopMaskFlag)="showMaskFlag($ event)"中的(shopMaskFlag)是来自于@Output() shopMaskFlag = new EventEmitter();
而showMaskFlag($event)来自于父页面的

showMaskFlag(event){
this.shopPageMask = event;// shopPageMask这个变量是在这个父页面定义的
}
<div *ngIf="showPageMask" class="mask" (click)="showMask.hideGuide()"></div>
这段代码是表示蒙层的意思，点击蒙层使shop消失，这个就是为什么加#shopMask的原因，#shopMask可以随便定义，可以叫#mask，#shop什么都可以，但要加#，同时一定要与
(click)="showMask.hideGuide()"中的showMask保持一致，如果是#mask，那么就是(click)="mask.hideGuide()"，这个原理就是我在父组件点击的时候，点击的时候让它触发子组件中的hideGuide()方法，这个媒介就是自定义的#shopMask（或者是#mask，这个名称只是在html中定义一下就行了）。然后再触发子组件中的hideGuide()的方法，非常完美。这就是组件化的好处，只需传参进去就行了。

还有就是#shopMask不能与ngIf同在，因为ngIf执行的时候可能#shopMask这样的属性还没加载，所以在往下走的时候容易报错。
例如：

<shop *ngIf=“showPageMask”  #shopMask [shopImage]="'signShop.png'" (shopMaskFlag)="showMaskFlag($event)" class="addCom"></shop>
    <div *ngIf="showPageMask" class="mask" (click)="showMask.hideGuide()"></div>

这个时候就会报错了，一般会这样来解决

<div [hidden]="showPageMask">
<shop *ngIf=“showPageMask”  #shopMask [shopImage]="'signShop.png'" (shopMaskFlag)="showMaskFlag($event)" class="addCom"></shop>
</div>
 <div *ngIf="showPageMask" class="mask" (click)="showMask.hideGuide()"></div>

通过这个新的思路和方法节省了很多代码，很好的复用了代码，非常不错。
以后有机会要经常使用。
好了，就到这吧。

项目总结之angular中利用input和output实现组件之间数据的传递

猜你喜欢