目前元件化思想非常盛行，近期在在專案中就用到了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 = “”;作為引數傳進來的

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>

通過這個新的思路和方法節省了很多程式碼，很好的複用了程式碼，非常不錯。
以後有機會要經常使用。
好了，就到這吧。