angular6 開發實踐基礎知識彙總

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;

                      }

                }