1.一個(gè)小問題，挺煩人的，記下來：
注意，修飾和類之間，一定記得加一個(gè)空行，不然出錯(cuò)，還不知道錯(cuò)在哪里。
2.Uint8Array數(shù)組的拷貝部分，使用：
const partdatas = new Uint8Array(uploadlength);
partdatas.set(datas.subarray(uploadedLen, uploadedLen + uploadlength));
注意：subarray的參數(shù)，是start與end，并且不包含end
2.使用 ngModel時(shí)需要 FormsModule
3.帶 trackBy 的 *ngFor
ngFor 指令有時(shí)候會(huì)性能較差，特別是在大型列表中。 對一個(gè)條目的一丁點(diǎn)改動(dòng)、移除或添加，都會(huì)導(dǎo)致級聯(lián)的 DOM 操作。
例如，重新從服務(wù)器查詢可以刷新包括所有新英雄在內(nèi)的英雄列表。
他們中的絕大多數(shù)（如果不是所有的話）都是以前顯示過的英雄。你知道這一點(diǎn)，是因?yàn)槊總€(gè)英雄的 id 沒有變化。 但在 Angular 看來，它只是一個(gè)由新的對象引用構(gòu)成的新列表， 它沒有選擇，只能清理舊列表、舍棄那些 DOM 元素，并且用新的 DOM 元素來重建一個(gè)新列表。
如果給它指定一個(gè) trackBy，Angular 就可以避免這種折騰。 往組件中添加一個(gè)方法，它會(huì)返回 NgFor應(yīng)該追蹤的值。 在這里，這個(gè)值就是英雄的 id。
src/app/app.component.ts
trackByHeroes(index: number, hero: Hero): number { return hero.id; }
在微語法中，把 trackBy 設(shè)置為該方法。
<div *ngFor="let hero of heroes; trackBy: trackByHeroes">
({{hero.id}}) {{hero.name}}
</div>
4.Angular 的安全導(dǎo)航操作符 (?.) 是一種流暢而便利的方式，用來保護(hù)出現(xiàn)在屬性路徑中 null 和 undefined 值。 下例中，當(dāng) currentHero 為空時(shí)，保護(hù)視圖渲染器，讓它免于失敗。
The current hero's name is {{currentHero?.name}}
5,:host 選擇器
使用 :host 偽類選擇器，用來選擇組件宿主元素中的元素（相對于組件模板內(nèi)部的元素）。
:host {
display: block;
border: 1px solid black;
}
:host 選擇是是把宿主元素作為目標(biāo)的唯一方式。除此之外，你將沒辦法指定它， 因?yàn)樗拗鞑皇墙M件自身模板的一部分，而是父組件模板的一部分。
要把宿主樣式作為條件，就要像函數(shù)一樣把其它選擇器放在 :host 后面的括號中。
下一個(gè)例子再次把宿主元素作為目標(biāo)，但是只有當(dāng)它同時(shí)帶有 active CSS 類的時(shí)候才會(huì)生效。
:host(.active) {
border-width: 3px;
}
6.<ng-template>指令
<ng-template>是一個(gè) Angular 元素，用來渲染 HTML。 它永遠(yuǎn)不會(huì)直接顯示出來。 事實(shí)上，在渲染視圖之前，Angular 會(huì)把 <ng-template> 及其內(nèi)容替換為一個(gè)注釋。
在Angular里，通常將它當(dāng)作一個(gè)嵌入式的模版
通過ViewChild獲取它的一個(gè)實(shí)例，可見它是一個(gè)TemplateRef實(shí)例
7.<ng-container>
Angular 的 <ng-container> 是一個(gè)分組元素，但它不會(huì)污染樣式或元素布局，因?yàn)?Angular 壓根不會(huì)把它放進(jìn) DOM 中。
<ng-container> 是一個(gè)由 Angular 解析器負(fù)責(zé)識別處理的語法元素。 它不是一個(gè)指令、組件、類或接口，更像是 JavaScript 中 if 塊中的花括號。
Angular2使用<ng-content>元素作內(nèi)容映射，所謂內(nèi)容映射，是指在組件內(nèi)嵌入模版代碼，方便定制可復(fù)用的組件。
我們定義兩個(gè)組件<app-wrapper>和<app-counter>來說明<ng-content>的用處。
//<app-wrapper>
import { Component } from '@angular/core';
@Component({
selector: 'app-wrapper',
template: <div> <h1>Test ng-content</h1> </div> <ng-content> </ng-content>})
export class WrapperComponent {}
//<app-counter>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-counter',
template: <p>{{count}}</p>
})
export class CounterComponent {
private static id = 1;
count: number;
constructor() {
this.count = CounterComponent.id++;
}
}
使用：
<app-wrapper>
<app-counter>3</app-counter>
<app-counter>2</app-counter>
<app-counter>1</app-counter>
</app-wrapper></pre>
效果：
可以看見<app-counter>元素作為內(nèi)容映射到了<app-wrapper>內(nèi)部，相當(dāng)于替換掉了<ng-content>
ng-container
<ng-container>是Angular2定義的一個(gè)特殊的tag。
<ng-container>測試文本</ng-container>
上面的代碼渲染到頁面時(shí)：
可以看到<ng-container>并不存在，它僅僅是作為一個(gè)容器使用。
<ng-container *ngIf="false">測試文本</ng-container></pre>
在它之上我們可以使用Angular的指令，而不像<div>之類的元素影響布局。
注意：<ng-container>awtrasf</ng-container>,這是個(gè)容器而已。
<ng-content>這是個(gè)占位符，注意二者的區(qū)別。
