1 事件處理

   1.1   滑鼠移入事件觸發

         (mouseenter)=" "

              eg:   (mouseenter)="isCollapsed=false"        通過給isCollapsed賦值來實現隱藏顯示

   1.2   滑鼠移出事件觸發

          (mouseleave

)=" "                  eg:  (mouseleave)="isCollapsed=true"          通過給isCollapsed賦值來實現隱藏顯示            1.3  點選事件觸發              (click

)=" "                 eg： (click)="toggleCollapsed()"                     點選事件，執行一個函式   2  結構型指令       2.1  angular 內建指令               2.1.1  元素顯示隱藏指令 （布林值，為true時顯示，為false時隱藏）       

                 *ngIf=" "                        eg :  *ngIf="leveldisplay"             leveldisplay=true 時顯示                  2.1.2  元素迭代指令                         *ngFor=""                         eg:  *ngFor="let hero of heroes"      heroes 是要迭代的資料 ， hero 為迭代的屬性，可以在它身上取到屬性值  如 hero.id         2.2 angular  自定義指令             2.2.1  建立自定義元件                    引入建立指令需要依賴的元件庫                   import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';                  Directive       指令裝飾器                 TemplateRef      生成的 <ng-template> 元素中建立一個內嵌的檢視，並把這個檢視插入到一個檢視容器中，可以使用TemplateRef取得 <ng-template> 的內容                 ViewContainerRef     通過ViewContainerRef來訪問這個檢視容器。                    在指令裝飾器中，選擇在html中建立的指令屬性名字， 這個方括號定義出了一個 CSS 屬性選擇器。                  @Directive({ selector: '[appUnless]'})                    都注入到指令的建構函式中，作為該類的私有屬性。   　　　　constructor(  private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }
                                 自定義指令的執行程式碼                    宣告一個控制屬性                   private hasView = false;                     設定自定義的屬性appUnless 的值的型別為布林值
                 @Input()   set appUnless(condition: boolean) {                       判斷  布林值不為真，且 宣告的變數值不為真                       if (!condition && !this.hasView) {                              在檢視中建立一個 內嵌的檢視，並把這個檢視插入到一個檢視容器中                              this.viewContainer.createEmbeddedView(this.templateRef);                              讓隱藏的檢視顯示出來                              this.hasView = true;                       } else if (condition && this.hasView) {                             把檢視容器中建立的內嵌檢視刪除                             this.viewContainer.clear();                            讓顯示的檢視隱藏起來                             this.hasView = false;                       }                 }