everest33

一：學習記錄

3, @viewchild()修飾器相關：

@ViewChild('myname'/ Component, {read: ViewContainerRef, static: true}) target : targetType;

　　read參數的含義： https://stackoverflow.com/questions/37450805/what-is-the-read-parameter-in-viewchild-for/37476195#37476195

4, 動態組件：https://segmentfault.com/a/1190000011800979

5, 雙向綁定

• 自定義組件雙向綁定最“簡單”， 使用x和xChange事件, 即[(x)]，原生的HTML元素不支持此類用法
• 原生的HTML元素分為兩類，一類是表單，可以直接使用[(ngModel)]，框架會自動雙向綁定【原因是Angular為所有的原生表單都提供了“值訪問器”】，另一類是其他原生HTML元素，angular框架沒有實現“值訪問器”，而且不能使用x和xChange事件，所以如果想要雙向綁定，只能使用[(ngModel)]然后自己實現值訪問器。

6,

二：問題記錄 

7, 自己寫的兩個模塊，其中一個要用到第二個中的一些組件，如何寫？  exports數組

8,單例應用?中的forRoot方法?

---

平時記錄：

※， ng generate component list --prefix separate-setting ；

※，升級 angular 并引入 ng-zorro 框架

0. npm view @angular/core version(s)  查看 @angular/core 的最新可用(所有可用）版本

1. 手動改package.json中的 @angular/core,等相關依賴的版本，ng-zorra官網 可以查看 ng-zorra框架對應的angular版本號

2. npm install 安裝依賴

3. ng add ng-zorro-antd 安裝ng-zorra框架，可以指定版本號 ng add ng-zorra-antd@x.x.x

4. npm start 哪里報錯改哪里(一般錯誤是某些依賴版本不對，按照改成相應版本然后npm install 即可)

※，

 

---

NG-ZORRO官網： https://ng.ant.design/docs/introduce/zh

NG-ZORRA國內鏡像：https://ng-zorro.gitee.io/docs/introduce/zh

官網學習筆記

 一，組件與模板

1， 顯示數據

• 1， 組件的概念：一個帶有 @Component()裝飾器的類，和它的伴生模板關聯在一起。組件類及其模板共同定義了一個視圖。組件是指令的一種特例。@Component() 裝飾器擴展了 @Directive() 裝飾器，增加了一些與模板有關的特性。Angular 的組件類負責暴露數據，并通過數據綁定機制來處理絕大多數視圖的顯示和用戶交互邏輯。
• 1，可以使用指令來向模板中添加邏輯，指令告訴 Angular 在渲染頁面時要如何修改。
• 1，要顯示組件的屬性，最簡單的方式就是通過插值 (interpolation) 來綁定屬性名。 要使用插值，就把屬性名包裹在雙花括號里放進視圖模板，如 {{myHero}}。
• 1， *ngFor="let hero of heroes" 中的 hero 叫做 模板輸入變量
• 1 可以通過組件和指令來擴展模板中的 HTML 詞匯。它們看上去就是新元素和屬性。

2 模板語法：

• 插值：插值是一種特殊語法，Angular 會將其轉換為屬性綁定。如果你想用別的分隔符來代替 {{ 和 }}，也可以通過 Component 元數據中的 interpolation 選項來配置插值分隔符。
• 模板表達式 （點此）：
  • {{1+2}}中的1+2， 以及屬性綁定 [attr]="1+2"等號右側的1+2 叫做模板表達式。
  • 模板表達式類似JavaScript代碼，但是不能使用那些具有或可能引發副作用的 JavaScript 表達式(如賦值，new, 表達式鏈(;)等)，也不能引用全局命名空間中的任何東西，比如 window 或 document。它們也不能調用 console.log 或 Math.max。 它們只能引用模板表達式上下文中的成員。假如該表達式調用了具有副作用的屬性或方法，比如調用類似 getFoo() 的函數，只有你知道 getFoo() 做了什么。如果 getFoo() 更改了某些內容，而你恰巧綁定到該內容，則 Angular 可能會也可能不會顯示更改后的值。Angular 可能會檢測到更改并拋出警告錯誤。最佳實踐是堅持使用屬性和返回值并避免副作用的方法。
• 表達式上下文：典型的表達式上下文就是這個組件實例，它是各種綁定值的來源。表達式中的上下文變量是由模板變量(1,模板輸入變量；2,模板引用變量)、指令的上下文變量（如果有）和組件的成員疊加而成的。 如果你要引用的變量名存在于一個以上的命名空間中，那么，模板變量是最優先的，其次是指令的上下文變量，最后是組件的成員。
• 模板表達式使用指南：
  • 屬性名或方法調用應該是常態，但偶然使用邏輯取反 ! 也是可以的。 其它情況下，應該把應用程序和業務邏輯限制在組件中，這樣它才能更容易開發和測試。

  • 模板表達式除了目標屬性的值以外，不應該改變應用的任何狀態。這條規則是 Angular “單向數據流”策略的基礎。 永遠不用擔心讀取組件值可能改變另外的顯示值。 在一次單獨的渲染過程中，視圖應該總是穩定的。

• 模板語句(點此)：1 模板語句用來響應由綁定目標（如 HTML 元素、組件或指令）觸發的事件。 模板語句將在事件綁定一節看到，它出現在 = 號右側的引號中，就像這樣：(event)="statement"。2 和模板表達式一樣，模板語句使用的語言也像 JavaScript。 模板語句解析器和模板表達式解析器有所不同，特別之處在于它支持基本賦值 (=) 和表達式鏈 (;)。3 和表達式中一樣，語句只能引用模板語句上下文中 —— 通常是正在綁定事件的那個組件實例。
• 模板語句上下文：典型的語句上下文就是當前組件的實例。語句上下文可以引用模板上下文中的屬性，如模板的$event對象，模板輸入變量，模板引用變量<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
• 模板語句使用指南：

  • 模板語句不能引用全局命名空間的任何東西。比如不能引用 window 或 document，也不能調用 console.log 或 Math.max。和表達式一樣，避免寫復雜的模板語句。 常規是函數調用或者屬性賦值。
• 數據綁定：
  • 組件--->模板
    • 插值，屬性(property),Attribute, CSS 類,樣式;  

    • {{expression}}
      [target]="expression"
      bind-target="expression"

  • 模板---->組件
    • 事件

    • (target)="statement"
      on-target="statement"

  • 模板<---->組件

    • [(target)]="expression"
      bindon-target="expression"

  • 數據綁定的通用規則。數據綁定使用 DOM 元素、組件和指令的 Property，而不是 HTML 的Attribute 。

  • HTML attribute 與 DOM property 的對比。該通用規則可以幫助你建立 HTML Attribute 和 DOM Property 的思維模型： attribute 負責初始化 DOM property，然后完工。Property 值可以改變；Attribute 值則不能。

  • property 綁定： [target]="expression"
    • 方括號 [] 告訴 Angular 計算該模板表達式。如果省略括號，Angular 會將字符串視為常量，并使用該字符串初始化目標屬性(property)。但有時候可以特意使用這種方式。
    • 屬性property綁定和插值表達式 在屬性值為字符串的情況下是可以通用的，如下面是等效的。但是屬性值不為字符串時必須使用屬性property綁定。

      <p><img src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
      <p><img [src]="itemImageUrl"> is the <i>property bound</i> image.</p>

      <p><span>"{{interpolationTitle}}" is the <i>interpolated</i> title.</span></p>
      <p>"<span [innerHTML]="propertyTitle"></span>" is the <i>property bound</i> title.</p>

    • 屬性綁定會過濾<script>標簽，插值表達式會原樣顯示<script>標簽
  • attribute、class、style 綁定：模板語法為那些不太適合使用屬性綁定的場景提供了專門的單向數據綁定形式。

    • attribute綁定：通常，使用 Property 綁定設置元素的 Property 優于使用字符串設置 Attribute。但是，有時沒有要綁定的元素的 Property，所以其解決方案就是 Attribute 綁定。

      <!-- create and set an aria attribute for assistive technology -->
      <button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

    • 注意 colspan Attribute 和 colSpan Property 之間的區別。插值和 Property 綁定只能設置 Property，不能設置 Attribute。所以這么寫是錯誤的：<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>，應該這么寫：

      <!-- Notice the colSpan property is camel case -->
      <tr><td [colSpan]="1 + 1">Three-Four</td></tr>

    • 類綁定：
      • 單個類綁定： [class.foo]="boolean | undefined | null"
      • 多個類綁定： [class]="classExpr"，classExpr可以為以下：
        • string, 如，"my-class-1 my-class-2 my-class-3"，注意寫法：[class]="'class1 class2 class3'",即需提供字符串，用引號引起來
        • {[key: string]: boolean | undefined | null}， 如{foo: true, bar: false}
        • Array<string>,如，['foo', 'bar']
      • 盡管此技術適用于切換單個類名，但在需要同時管理多個類名時請考慮使用 NgClass 指令。
    • style綁定：
      • 單一樣式綁定：[style.width]="string | undefined | null"，如：[style.width]="'100px'",注意用引號把100px引起來才是正確的寫法。
      • 帶單位的單一樣式綁定：[style.width.px]="number | undefined | null"，如[style.width]="100"

      • 多個樣式綁定：[style]="styleExpr"， styleExpr可以為下：

        • string："width: 100px; height: 100px"
        • {[key: string]: string | undefined | null}： 
        • Array<string>：

      •   NgStyle 指令可以作為 [style] 綁定的替代指令。但是，應該把上面這種 [style] 樣式綁定語法作為首選，因為隨著 Angular 中樣式綁定的改進，NgStyle 將不再提供重要的價值，并最終在未來的某個版本中刪除。

    • 樣式綁定和類綁定的優先級規則

    • 委托優先級較低的樣式： 更高優先級的樣式可以使用 undefined 值“委托”給低級的優先級樣式。雖然把 style 屬性設置為 null 可以確保該樣式被移除，但把它設置為 undefined 會導致 Angular 回退到該樣式的次高優先級。

  • 事件綁定 

  • 雙向綁定 [(...)]
    • <app-sizer [(size)]="fontSizePx"></app-sizer>；子組件app-sizer中要有兩個屬性： @Input() size: number | string; @Output() sizeChange = new EventEmitter<number>();
    • 雙向綁定語法實際上是屬性綁定和事件綁定的語法糖。 Angular 將 SizerComponent 的綁定分解成這樣：<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
    • 表單中的雙向綁定
  • NgModel 和值訪問器: [https://angular.cn/guide/template-syntax#ngmodel-and-value-accessors] 
    •  NgModel 指令僅適用于通過 ControlValueAccessor 適配過這種協議的元素。Angular 已經為所有基本的 HTML 表單元素提供了值訪問器
    • 在編寫適當的值訪問器之前，不能將 [(ngModel)] 應用于非表單的原生元素或第三方自定義組件。欲知詳情，參見DefaultValueAccessor上的 API 文檔。
    • 你不一定非用為所編寫的 Angular 組件提供值訪問器，因為你還可以把值屬性和事件屬性命名為符合 Angular 的基本雙向綁定語法的形式，并完全跳過 NgModel。
    • 見下面其他說明
  • 內置指令：Angular 提供了兩種內置指令：屬性型指令和結構型指令

    • 內置屬性型指令：屬性型指令會監聽并修改 HTML 元素和組件的行為、Attribute 和 Property。常見的屬性型指令有

      • NgClass —— 添加和刪除一組 CSS 類。（感覺和類綁定 [class]="classExpr"差不多，具體有待探究）
      • NgStyle —— 添加和刪除一組 HTML 樣式。（同上，類似樣式綁定[style]="styleExpr"）
      • NgModel —— 將數據雙向綁定添加到 HTML 表單元素。要想在雙向數據綁定中使用 ngModel 指令，必須先導入 FormsModule 并將其添加到 NgModule 的 imports 列表中。
        • <input [(ngModel)]="propVal" />,拆成如下：
        • <input [ngModel]="propVal" (ngModelChange)="propVal=$event" />, 背后的邏輯是這樣的：<input [value]="propVal" (input)="propVal=$event.target.value" />
        • [(ngModel)] 語法只能設置數據綁定屬性。如果你要做得更多，可以編寫擴展表單。例如，下面的代碼將 <input> 值更改為大寫：
        • <input [ngModel]="currentItem.name" (ngModelChange)="setUppercaseName($event)" id="example-uppercase">
    • 內置結構型指令：結構型指令的職責是 HTML 布局。常見的結構型指令有：
      • NgIf —— 從模板中創建或銷毀子視圖。
      • NgFor —— 為列表中的每個條目重復渲染一個節點。
        • 賦值給 *ngFor 的字符串不是模板表達式。而是一個微語法 —— 由 Angular 解釋的一種小型語言。字符串 "let item of items" 的意思是：將 items 數組中的每個條目存儲在局部循環變量 item 中，并使其可用于每次迭代的模板 HTML 中。Angular 將該指令轉換為包裹著宿主元素的 <ng-template>，然后反復使用此模板為列表中的每個 item 創建一組新的元素和綁定。
        • item 前面的 let 關鍵字創建了一個名為 item 的模板輸入變量。
        • *ngFor="let item of items; let i=index; let fir=first;let o=odd;let e=even;let cnt=count",其中的index,first等值可以被捕獲并使用

        • 帶 trackBy 的 *ngFor， 點此

      • NgSwitch —— 一組在備用視圖之間切換的指令。
        • NgSwitch 實際上是三個協作指令的集合： NgSwitch，NgSwitchCase 和 NgSwitchDefault

        • <div [ngSwitch]="currentItem.feature">
          <app-stout-item *ngSwitchCase="'stout'" [item]="currentItem"></app-stout-item>
          <app-device-item *ngSwitchCase="'slim'" [item]="currentItem"></app-device-item>
          <app-lost-item *ngSwitchCase="'vintage'" [item]="currentItem"></app-lost-item>
          <app-best-item *ngSwitchCase="'bright'" [item]="currentItem"></app-best-item>
          <!-- . . . -->
          <app-unknown-item *ngSwitchDefault [item]="currentItem"></app-unknown-item>
          </div>

        • 如果試圖寫成 *ngSwitch，就會出現錯誤，因為 NgSwitch 是屬性型指令，而不是結構型指令。它不會直接接觸 DOM，而是會更改與之相伴的指令的行為。
        • NgSwitchCase 和 NgSwitchDefault 指令都是結構型指令，因為它們會從 DOM 中添加或移除元素。
      • 當指令沒有合適的宿主元素時，使用 <ng-container> 對元素進行分組。你只能往一個元素上應用一個結構型指令。

      • 模板引用變量（ #var ）：模板引用變量通常是對模板中 DOM 元素的引用。它還可以引用指令（包含組件）、元素、TemplateRef 或 Web Component。

        • 使用井號（#）聲明模板引用變量，可以在組件模板中的任何位置引用模板引用變量。
        • 在大多數情況下，Angular 會將模板引用變量的值設置為聲明該變量的元素。NgForm 指令可以更改該行為并將該值設置為其它值。

        • <form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
          <label for="name"
          >Name <input class="form-control" name="name" ngModel required />
          </label>
          <button type="submit">Submit</button>
          </form>

          <div [hidden]="!itemForm.form.valid">
          <p>{{ submitMessage }}</p>
          </div>

        • 帶有 NgForm 時，itemForm 就是對 NgForm 指令的引用，它能夠跟蹤表單中每個控件的值和有效性。原生 <form> 元素沒有 form 屬性，但 NgForm 指令有，這樣就能在 itemForm.form.valid 無效的情況下禁用提交按鈕，并將整個表單控制樹傳給父組件的 onSubmit() 方法。
        • 模板引用變量的范圍是整個模板。因此，不要在同一模板中多次定義相同的變量名，因為它在運行時的值將不可預測。
        • 也可以用 ref- 前綴代替 #。

          <input ref-fax placeholder="fax number" />
          <button (click)="callFax(fax.value)">Fax</button>
• 輸入輸出屬性@Input() 和 @Output() 
  • 要監視 @Input() 屬性的更改，請使用 Angular 的生命周期鉤子之一 OnChanges。OnChanges 是專門設計用于具有 @Input() 裝飾器的屬性的。欲知詳情，請參見生命周期鉤子指南的OnChanges部分。
  • 可以在組件或指令的元數據的 inputs 和 outputs 數組中標出這些成員，而不是使用 @Input() 和 @Output() 裝飾器來聲明輸入和輸出，但是風格指南中建議使用裝飾器
  • 指定別名：
    • 要在元數據中為輸入和輸出指定別名，請使用冒號分隔（:）的字符串，其左邊是屬性名，右邊是別名：
    • inputs: ['input1: saveForLaterItem'], // propertyName:alias outputs: ['outputEvent1: saveForLaterEvent']
    • 你可以通過將別名傳給 @Input() / @Output() 裝飾器來為屬性名指定別名。其內部名稱保持不變（對內和對外分別使用本名和別名）。

    • @Input('wishListItem') input2: string; // @Input(alias)
      @Output('wishEvent') outputEvent2 = new EventEmitter<string>(); // @Output(alias) propertyName = ...

    • 當為@Input()屬性設置get/set方法時，用法如下：
    • @Input() set hero(hero:Hero){this._hero = hero;} 這會在父組件將值傳入子組件時調用此set方法。

• 模板表達式中的運算符：Angular 模板表達式的語言是 JavaScript 語法的子集，并為特定情況添加了一些特殊的運算符。接下來將介紹其中的三個運算符：

  • 管道
    
    • {{item.manufactureDate | date:'longDate'}}
    • <p>Item json pipe: {{item | json}}</p>
    • 如果管道能接受多個參數，就用冒號分隔這些值。例如，{{ amount | currency:'EUR':'Euros '}}
  • 安全導航運算符  {{ item?.name }}
  • 非空斷言運算符   {{ item!.color.toUpperCase() }}
• 內置模板函數：
  • 類型轉換函數：使用 $any() 轉換函數來把表達式轉換成 any 類型. 
  • <p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>
  • <p>The item's undeclared best by date is: {{$any(this).bestByDate}}</p>

•  模板中的SVG：可以將 SVG 用作 Angular 中的有效模板。在 SVG 1.1和2.0 規范中了解更多信息。為什么要用 SVG 作為模板，而不是簡單地將其作為圖像添加到應用程序中？當你使用 SVG 作為模板時，就可以像 HTML 模板一樣使用指令和綁定。這意味著你將能夠動態生成交互式圖形。

3， 用戶輸入

•  反對把整個 DOM 事件(即$event對象)傳到方法中，因為這樣組件會知道太多模板的信息。 只有當它知道更多它本不應了解的 HTML 實現細節時，它才能提取信息。 這就違反了模板（用戶看到的）和組件（應用如何處理用戶數據）之間的分離關注原則。
• 建議使用模板引用變量獲取用戶輸入：<input #box (keyup)="0"> <p>{{box.value}}</p>。除非你綁定一個事件，否則這將完全無法工作。只有在應用做了些異步事件（如擊鍵），Angular 才更新綁定（并最終影響到屏幕）。 本例代碼將 keyup 事件綁定到了數字 0，這可能是最短的模板語句了。 雖然這個語句不做什么，但它滿足 Angular 的要求，所以 Angular 將更新屏幕。
• 監聽特定按鍵: 1,$event.keyCode==13 ; 2, <input #box (keyup.enter)="onEnter(box.value)">; keyup.任意鍵都可以
• Angular 還支持被動事件偵聽器。

4，屬性型指令：屬性型指令用于改變一個 DOM 元素的外觀或行為。

• 在 Angular 中有三種類型的指令：

1. 組件 — 擁有模板的指令

2. 結構型指令 — 通過添加和移除 DOM 元素改變 DOM 布局的指令

3. 屬性型指令 — 改變元素、組件或其它指令的外觀和行為的指令。如，NgClass, NgStyle, NgModel

• 創建一個簡單的屬性型指令
  

• @Directive({ selector: '[appHighlight]' })， 注意selector 的值是用方括號包起來的，普通的模板selector并不需要。
• angular綁定機制的信任度問題 ： 從angular的綁定機制看，組件或指令的屬性是私有的，只能被屬于它的模板綁定；而當添加了 @Input 時，Angular 綁定機制才會把它們當成公共的。 只有這樣，它們才能被其它組件或屬性綁定。注意理解以下：<p [appHighlight]='color'>xxxx</p>中的 APPHighlight 和 color 都是當前模板中綁定的屬性，但是color是屬于相互信任的當前組件中的屬性所以不用加@Input()，但是AppHighlight 則對于當前模板來說是屬于其他組件或指令的屬性，不能互相信任，所以這個其他的組件或指令就需要添加@Input()修飾，將其變成綁定機制中的公共的屬性。

5，結構型指令：三個常用的內置結構型指令 —— NgIf、NgFor和NgSwitch...。NgIf 引用的是指令的類名，而 ngIf 引用的是指令的屬性名。

*ngIf:

• <div *ngIf="hero" class="name">{{hero.name}}</div>
• 星號是一個用來簡化更復雜語法的“語法糖”。 從內部實現來說，Angular 把 *ngIf 屬性 翻譯成一個 <ng-template> 元素 并用它來包裹宿主元素，代碼如下：

• <ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
  </ng-template>

• Angular 會在真正渲染的時候填充 <ng-template> 包裹的內容，并且把 <ng-template> 替換為一個供診斷用的注釋。

*ngFor

• Angular 會把 *ngFor 用同樣的方式把星號（*）語法的 template屬性轉換成 <ng-template>元素。

• <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>

編寫自己的結構型指令：

• 星號（*）語法比不帶語法糖的形式更加清晰。 如果找不到單一的元素來應用該指令，可以使用<ng-container>作為該指令的容器。

  雖然很少有理由在模板中使用結構型指令的屬性形式和元素形式，但這些幕后知識仍然是很重要的，即：Angular 會創建 <ng-template>，還要了解它的工作原理。 當需要寫自己的結構型指令時，你就要使用 <ng-template>。

每個宿主元素上只能有一個結構型指令：

• 原因很簡單。結構型指令可能會對宿主元素及其子元素做很復雜的事。當兩個指令放在同一個元素上時，誰先誰后？NgIf 優先還是 NgFor 優先？NgIf 可以取消 NgFor 的效果嗎？ 如果要這樣做，Angular 應該如何把這種能力泛化，以取消其它結構型指令的效果呢？
• 對這些問題，沒有辦法簡單回答。而禁止多個結構型指令則可以簡單地解決這個問題。 這種情況下有一個簡單的解決方案：把 *ngIf 放在一個"容器"元素上，再包裝進 *ngFor 元素。 這個元素可以使用ng-container，以免引入一個新的 HTML 層級。

<ng-template>元素：

• <ng-template>是一個 Angular 元素，用來渲染 HTML。 它永遠不會直接顯示出來。 事實上，在渲染視圖之前，Angular 會把 <ng-template> 及其內容替換為一個注釋。
• 如果沒有使用結構型指令，而僅僅把一些別的元素包裝進 <ng-template> 中，那些元素就是不可見的。結構型指令會讓 <ng-template> 正常工作。
• TemplateRef取得 <ng-template> 的內容

<ng-container>元素：

• Angular 的 <ng-container> 是一個分組元素，但它不會污染樣式或元素布局，因為 Angular 壓根不會把它放進 DOM 中。
• 有些 HTML 元素需要所有的直屬下級都具有特定的類型。 比如，<select> 元素要求直屬下級必須為 <option>，當需要使用結構型指令時，就沒辦法把這些選項<option>包裝進 <div> 或 <span> 中，此事就可以使用 ng-container。當然ng-container還有其他很多使用場景。
• <ng-container> 是一個由 Angular 解析器負責識別處理的語法元素。 它不是一個指令、組件、類或接口，更像是 JavaScript 中 if 塊中的花括號。

自定義結構型指令的一個例子.

6，管道:管道是一些簡單的函數，可以在模板表達式中用來接受輸入值并返回一個轉換后的值。

• Angular 為典型的數據轉換提供了內置的管道。請參閱管道 API 文檔 。
• 如果管道能接受多個參數，就用冒號分隔這些值。{{ amount | currency:'EUR':'Euros '}}
• 自定義管道的一個例子：
• test.pipe.ts

  import {Pipe, PipeTransform} from '@angular/core';
  
  @Pipe({
    name: 'test',
    /**
     * pure屬性默認為true，代表其實純管道，pure的意思是angular檢測管道值變化以決定是否需要重新渲染時只檢測pure變更，
     * 所謂pure變更即是 基本類型的變更 或者 對象引用的變更，而對象引用不變時，對象中的成員發生變化不屬于pure變更，
     * 只有將pure屬性設置為false時才會檢測對象成員的變更進而重新渲染。雖然非純管道很實用，但要小心使用。長時間運行非純管道可能會大大降低你的應用速度。
     */
    // pure:false
  })
  // 管道也可以繼承
  export class TestPipe implements PipeTransform {
  
    /**
     * 管道必須實現 PipeTransform 接口，transform第一個參數是管道前的輸入，
     * 管道的參數被收集在args變量中。
     */
    transform(value: any, ...args:any[]): unknown {
      let retval = "ThisIsTestPipe,輸入：" + value ;
      if (args.length > 0) {
        retval += ",參數:"
  
        for (let [index, arg] of args.entries()) {
          retval += String(arg);
          if (index != args.length - 1) {
            retval += ",";
          }
        }
      }
      return retval;
    }
  
  }

• html 模板使用此管道

  <!--fontSizePx是組件屬性，管道會檢測其變化而重新渲染-->
  <div>{{'測試自定義管道'|test:"參數1":"參數2":null:undefined:3:true:{key:"value"}:fontSizePx }}</div>

• AsyncPipe : 使用內置的 AsyncPipe 接受一個可觀察對象作為輸入，并自動訂閱輸入。如果沒有這個管道，你的組件代碼就必須訂閱這個可觀察對象來使用它的值，提取已解析的值、把它們公開進行綁定，并在銷毀這段可觀察對象時取消訂閱，以防止內存泄漏。 AsyncPipe 是一個非純管道，可以節省組件中的樣板代碼，以維護訂閱，并在數據到達時持續從該可觀察對象中提供值。
  

• <p>Message: {{ message$ | async }}</p>, message$是組件中的一個屬性名稱，使用$結尾不是語法，只是一個約定，表示這個變量是個可觀察對象。

7， 生命周期鉤子：

• 你可以通過實現一個或多個 Angular core 庫中定義的生命周期鉤子接口來響應組件或指令生命周期中的事件。這些鉤子讓你有機會在適當的時候對組件或指令實例進行操作，比如 Angular 創建、更新或銷毀這個實例時。每個接口都有唯一的一個鉤子方法，它們的名字是由接口名再加上 ng 前綴構成的。比如，OnInit 接口的鉤子方法叫做 ngOnInit()。如果你在組件或指令類中實現了這個方法，Angular 就會在首次檢查完組件或指令的輸入屬性后，緊接著調用它。
• ngOnChanges() 檢測@Input()修飾的屬性變化時，同時在 ngOnInit() 之前也會檢測一次。

• ngOnChanges(changes: SimpleChanges) {
    for (let propName in changes) {
      let chng = changes[propName];
      let cur  = JSON.stringify(chng.currentValue);
      let prev = JSON.stringify(chng.previousValue);
      this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
    }
  }
  
  或者： ngOnChanges(changes: {[propKey: string]: SimpleChange}) {}

• 檢測投影內容的變更： AfterContentInit() 和 AfterContentChecked() 鉤子
• 自定義變更檢測： ngDoCheck() 鉤子，無論變化發生在何處，每個變化檢測周期都會以很大的頻率調用這個鉤子，比如只要把光標移動到另一個 <input> 就會觸發一次調用。如果使用這個鉤子，那么你的實現必須非常輕量級，否則會損害用戶體驗。

8，組件之間交互：也就是讓兩個或多個組件之間共享信息的方法

• 父組件將值傳給子組件：@Input() inputProp
• 子組件將值轉給父組件(或者說父組件監聽子組件的事件)：@output() outPutEvent = new EventEmitter<string>();
• 父組件和子組件通過本地變量通信(父組件獲得子組件中的數據,即方向同@output)：<app-countdown-timer #timer></app-countdown-timer>
  • 父子組件通過本地變量方法是個簡單便利的方法。但是它也有局限性，因為父組件-子組件的連接必須全部在父組件的模板中進行。父組件本身的(類)代碼對子組件沒有訪問權。

  • 如果父組件的類需要讀取子組件的屬性值或調用子組件的方法，就不能使用本地變量方法。當父組件類需要這種訪問時，可以把子組件作為 ViewChild，注入到父組件里面。

• 父組件調用 @ViewChild()

  // 父組件(父類)中：
    @ViewChild(ChildComponent)
    private childComponent: ChildComponent; //將子組件注入變量childComponent中
  
  或者這么用：在父模板中定義一個子組件的引用變量，然后傳給父組件的@ViewChild()作為參數，如下：
  -- 父模板中：
  <child-component #child></child-component>
  // 父組件(父類)中:
      @ViewChild('child') private child:ChildComponent; 
  
  /*************說明****************/ 1, 被注入的子組件只有在 Angular 顯示了父組件視圖之后才能訪問，即最早使用子組件的地方是生命周期鉤子 ngAfterViewInit中。

• 父組件和子組件通過服務來通訊；在父組件的@Component元數據中定義 providers: [MissionService]，則將此服務限定在父組件和子組件中，其他的組件無法使用此服務。

• 【擴展：viewChild的各種方式】：

  1, 如上例，在父組件中使用viewChild，獲取子組件,此時父模板中必須含有子組件的選擇器。
  2. 在ts文件中 使用viewChild,獲取模板文件中元素或者<ng-template>元素，
  
  例1，獲取div元素：
  html模板文件：<div #myDiv></div>
  ts文件：@ViewChild("myDiv", {static: true}) private myDivElem: ElementRef<any> | null; //獲取到此DOM元素后便可以對此DOM元素進行各種操作了。
  console.log(myDivElem);
  myDivElem.nativeElement;
  myDivElem.nativeElement.value = null;
  
  例2,獲取ng-template模板
  html模板文件:<ng-template #myTemplate></ng-template>
  ts文件：@ViewChild("myTemplate", {static: true}) private myTemplateRef: TemplateRef<any>|null; 

9，組件樣式：

•  

10，動態組件

• Angular 自帶的 API 就能支持動態加載組件。
  
• 參見文檔例子。

11，angular元素

• Angular 元素就是打包成自定義元素的 Angular 組件。
• 參見文檔

二，表單與用戶輸入

1, angular表單簡介：Angular 提供了兩種不同的方法來通過表單處理用戶輸入：響應式表單和模板驅動表單。

• 響應式表單： <input type="text" [formControl]="favoriteColorControl">    ，   favoriteColorControl = new FormControl('');
• 模板驅動表單： <input type="text" [(ngModel)]="favoriteColor">     ，     favoriteColor = '';

2,響應式表單

• 1

3, 驗證表單輸入

4, 構建動態表單

三，Observable 與 RxJS

四，

1

1

1

1

1

1

1

1

1

1

1

1

1