屬性型指令總結             看了幾次官網的屬性指令文件，對一些關鍵的東西還是很混淆，學到的都是基於表面的使用，這裡是我把一些重要的東西給總結起來，方便自己看：            1.三種指令：元件 、結構型指令（ngif  ngfor等）和屬性型指令 （所有元件都為指令）            結構型指令 —   通過新增和移除 DOM 元素改變 DOM 佈局的指令
           屬性型指令 —   改變元素、元件或其它指令的外觀和行為的指令。        2.angular在標籤元素上發現我們自定義的屬性，先考慮是否為指令，如果為就例項化這個指令類，這就意味著我們在模板中引入這個指令，不用像服務一樣在建構函式裡聲明瞭，按我理解 元件 指令 管道 是處於同一等級的，這樣就不存在誰引入誰，直接拿來用就是了。          3.使用資料綁定向指令傳遞值        使用@input 向指令傳遞值，            <p appHightlight highlightColor="yellow">Highlighted in yellow</p>
           <p appHightlight [highlightColor]="'orange'">Highlighted in orange</p>         注意這二者的區別@input向指令輸入值的方式不同，多了個[ ]時orange也多了個‘ ’，因為不加orange會當成一個類的屬性         4.繫結到第二個屬性           可以直接寫在宿主裡<p [appHighlight]="color"defaultColor="violet">不過也需要通過@input來接值         5.這個是要注意的為什麼要加@Input？            @Input裝飾器都告訴Angular，該屬性是公共的，並且能被父元件繫結。 如果沒有@Input，Angular就會拒絕繫結到該屬性。
但我們以前也曾經把模板HTML繫結到元件的屬性，而且從來沒有用過@Input。 差異何在？
差異在於信任度不同。 Angular把元件的模板看做從屬於該元件的。 元件和它的模板預設會相互信任。 這也就是意味著，元件自己的模板可以繫結到元件的任意屬性，無論是否使用了@Input裝飾器。
但元件或指令不應該盲目的信任其它元件或指令。 因此元件或指令的屬性預設是不能被繫結的

。 從Angular繫結機制的角度來看，它們是私有的，而當添加了@Input時，它們變成了公共的 只有這樣，它們才能被其它元件或屬性繫結。
你可以根據屬性名在繫結中出現的位置來判定是否要加@Input。
當它出現在等號右側的模板表示式中時，它屬於模板所在的元件，不需要@Input裝飾器。（資料來源）
當它出現在等號左邊的方括號（[ ]）中時，該屬性屬於其它元件或指令，它必須帶有@Input 裝飾器。（因為angular操作的是dom的property 不是attribute 對不存在的dom屬性就不信任，所以有的不需要@input)
試用此原理分析下列範例：
src/app/app.component.html (color)
 content_copy
<p [appHighlight]="color">Highlight me!</p>
color屬性位於右側的繫結表示式中，它屬於模板所在的元件。 該模板和元件相互信任。因此color不需要@Input裝飾器。
myHighlight屬性位於左側，它引用了MyHighlightDirective中一個帶別名的屬性，它不是模板所屬元件的一部分，因此存在信任問題。 所以，該屬性必須帶@Input裝飾器。    二 結構型指令     結構型指令的職責是HTML佈局。 它們塑造或重塑DOM的結構，比如新增、移除或維護這些元素。Angular會解開這個*語法糖，變成一個<ng-template>標記，包裹著宿主元素及其子元素     1.NgIf 大駝峰為類，小駝峰為它的屬性。 當我們隱藏掉一個元素時，元件的行為還在繼續 —— 它仍然附加在它所屬的DOM元素上， 它也仍在監聽事件。Angular會繼續檢查哪些能影響資料繫結的變更。 元件原本要做的那些事情仍在繼續。
雖然不可見，元件及其各級子元件仍然佔用著資源，而這些資源如果分配給別人可能會更有用。 在效能和記憶體方面的負擔相當可觀，響應度會降低，當然，從積極的一面看，重新顯示這個元素會非常快。 元件以前的狀態被保留著，並隨時可以顯示。 元件不用重新初始化 —— 該操作可能會比較昂貴。 這時候隱藏和顯示就成了正確的選擇。
但是，除非有非常強烈的理由來保留它們，否則我們更傾向於移除使用者看不見的那些DOM元素，並且使用NgIf這樣的結構型指令來收回用不到的資源。           *ngIf指令被移到了<ng-template>元素上。在那裡它變成了一個屬性繫結[ngIf]。
        <div>上的其餘部分，包括它的class屬性在內，移到了內部的<ng-template>元素上。（只會顯示最終的結果）      2、ngfor          <div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd"> ({{i}}) {{hero.name}}</div>（三種用法)
    <ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"><div [class.odd]="odd">({{i}}) {{hero.name}}</div></ng-template>     3.ngswitch 為屬性型指令  ngswitchcase 為結構型指令  三 自定義結構型指令 ng-template     優先使用星號（*）語法
 星號（*）語法比不帶語法糖的形式更加清晰。 如果找不到單一的元素來應用該指令，可以使用<ng-container>作為該指令的容器。
 雖然很少有理由在模板中使用結構型指令的屬性形式和元素形式，但這些幕後知識仍然是很重要的，即：Angular會建立<ng-template>，還要了解它的工作原理。 當需要寫自 己的結構型指令時，我們就要使用<ng-template>,<ng-template>是一個 Angular 元素，用來渲染HTML。 它永遠不會直接顯示出來。 事實上，在渲染檢視之前，Angular 會把<ng-template>及其內容替換為一個註釋。自己寫一些標籤在ng-template時，不顯示當成註釋     四、<ng-container> 的救贖 另一個問題是：有些HTML元素需要所有的直屬下級都具有特定的型別。 比如，<select>元素要求直屬下級必須為<option>，那麼我們就沒辦法把這些選項包裝進<div>或<span>中。  <span *ngFor="let h of heroes">
      <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
      </span>option為空結構指令的錯亂       Angular的<ng-container>是一個分組元素，但它不會汙染樣式或元素佈局，因為 Angular 壓根不會把它放進 DOM 中。       <ng-container *ngIf="hero">
    <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
     </ng-container>解決一些標籤不顯示的問題 （select option)          雜項：       1. ElementRef是一個服務，它賦予我們通過它的nativeElement屬性直接訪問 DOM 元素的能力。 Renderer服務允許通過程式碼設定元素的樣式       [email protected]裝飾器引用屬性型指令的宿主元素 相當於addEventListene            當然，你可以通過標準的JavaScript方式手動給宿主 DOM 元素附加一個事件監聽器。 但這種方法至少有三個問題:            必須正確的書寫事件監聽器。當指令被銷燬的時候，            必須拆卸事件監聽器，否則會導致記憶體洩露。             必須直接和 DOM API 打交道，應該避免這樣做。     [email protected]取別名@Input('appHighlight') highlightColor: string;     4. 每個宿主元素上只能有一個結構型指令,  有一個簡單的解決方案：把*ngIf放在一個"容器"元素上，再包裝進 *ngFor 元素。 這個元素可以使用ng-container，以免引入一個新的HTML層級    5.使用TemplateRef取得<ng-template>的內容，並通過ViewContainerRef來訪問這個檢視容器。  總結： 結構型指令可以操縱 HTML 的元素佈局。
當沒有合適的容器元素時，可以使用<ng-container>對元素進行分組。
Angular 會把星號（*）語法解開成<ng-template>。
內建指令NgIf、NgFor和NgSwitch的工作原理。
微語法如何展開成<ng-template>。
寫了一個自定義結構型指令 —— UnlessDirective。 angular預設是單資料繫結   angularjs預設是雙資料繫結  。 屬性指令意味著標籤的左右都為元件的屬性 。