目前组件化思想非常盛行,近期在在项目中就用到了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)"中的(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>
通过这个新的思路和方法节省了很多代码,很好的复用了代码,非常不错。
以后有机会要经常使用。
好了,就到这吧。