1.一個小問題,挺煩人的巡社,記下來:
注意遣鼓,修飾和類之間,一定記得加一個空行重贺,不然出錯骑祟,還不知道錯在哪里。
2.Uint8Array數(shù)組的拷貝部分气笙,使用:
const partdatas = new Uint8Array(uploadlength);
partdatas.set(datas.subarray(uploadedLen, uploadedLen + uploadlength));
注意:subarray的參數(shù)次企,是start與end,并且不包含end
2.使用 ngModel時需要 FormsModule
3.帶 trackBy 的 *ngFor
ngFor 指令有時候會性能較差潜圃,特別是在大型列表中缸棵。 對一個條目的一丁點(diǎn)改動、移除或添加谭期,都會導(dǎo)致級聯(lián)的 DOM 操作堵第。
例如,重新從服務(wù)器查詢可以刷新包括所有新英雄在內(nèi)的英雄列表隧出。
他們中的絕大多數(shù)(如果不是所有的話)都是以前顯示過的英雄踏志。你知道這一點(diǎn),是因?yàn)槊總€英雄的 id 沒有變化胀瞪。 但在 Angular 看來针余,它只是一個由新的對象引用構(gòu)成的新列表, 它沒有選擇凄诞,只能清理舊列表圆雁、舍棄那些 DOM 元素,并且用新的 DOM 元素來重建一個新列表帆谍。
如果給它指定一個 trackBy伪朽,Angular 就可以避免這種折騰。 往組件中添加一個方法汛蝙,它會返回 NgFor應(yīng)該追蹤的值烈涮。 在這里,這個值就是英雄的 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 為空時翠储,保護(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 后面的括號中。
下一個例子再次把宿主元素作為目標(biāo)谱煤,但是只有當(dāng)它同時帶有 active CSS 類的時候才會生效摊求。
:host(.active) {
border-width: 3px;
}
6.<ng-template>指令
<ng-template>是一個 Angular 元素,用來渲染 HTML刘离。 它永遠(yuǎn)不會直接顯示出來室叉。 事實(shí)上,在渲染視圖之前硫惕,Angular 會把 <ng-template> 及其內(nèi)容替換為一個注釋茧痕。
在Angular里,通常將它當(dāng)作一個嵌入式的模版
通過ViewChild獲取它的一個實(shí)例恼除,可見它是一個TemplateRef實(shí)例
7.<ng-container>
Angular 的 <ng-container> 是一個分組元素凿渊,但它不會污染樣式或元素布局,因?yàn)?Angular 壓根不會把它放進(jìn) DOM 中缚柳。
<ng-container> 是一個由 Angular 解析器負(fù)責(zé)識別處理的語法元素埃脏。 它不是一個指令、組件秋忙、類或接口彩掐,更像是 JavaScript 中 if 塊中的花括號。
Angular2使用<ng-content>元素作內(nèi)容映射灰追,所謂內(nèi)容映射堵幽,是指在組件內(nèi)嵌入模版代碼,方便定制可復(fù)用的組件弹澎。
我們定義兩個組件<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定義的一個特殊的tag苦蒿。
<ng-container>測試文本</ng-container>
上面的代碼渲染到頁面時:
可以看到<ng-container>并不存在殴胧,它僅僅是作為一個容器使用。
<ng-container *ngIf="false">測試文本</ng-container></pre>
在它之上我們可以使用Angular的指令,而不像<div>之類的元素影響布局团滥。
注意:<ng-container>awtrasf</ng-container>,這是個容器而已竿屹。
<ng-content>這是個占位符,注意二者的區(qū)別灸姊。