雜記3

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>

效果:

https://img1.mukewang.com/5ac07f510001c4b206700438.jpg

可以看見<app-counter>元素作為內(nèi)容映射到了<app-wrapper>內(nèi)部,相當(dāng)于替換掉了<ng-content>

ng-container


<ng-container>是Angular2定義的一個特殊的tag苦蒿。

<ng-container>測試文本</ng-container>

上面的代碼渲染到頁面時:

https://img1.mukewang.com/5ac07f6600018dcc06320248.jpg
https://img2.mukewang.com/5ac07f7000010e2808060116.jpg

可以看到<ng-container>并不存在殴胧,它僅僅是作為一個容器使用。

<ng-container *ngIf="false">測試文本</ng-container></pre>

https://img4.mukewang.com/5ac07f85000147cf08100096.jpg

在它之上我們可以使用Angular的指令,而不像<div>之類的元素影響布局团滥。

注意:<ng-container>awtrasf</ng-container>,這是個容器而已竿屹。
<ng-content>這是個占位符,注意二者的區(qū)別灸姊。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拱燃,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子力惯,更是在濱河造成了極大的恐慌碗誉,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件父晶,死亡現(xiàn)場離奇詭異哮缺,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)诱建,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進(jìn)店門蝴蜓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人俺猿,你說我怎么就攤上這事茎匠。” “怎么了押袍?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵诵冒,是天一觀的道長。 經(jīng)常有香客問我谊惭,道長汽馋,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任圈盔,我火速辦了婚禮豹芯,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘驱敲。我一直安慰自己铁蹈,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布众眨。 她就那樣靜靜地躺著握牧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪娩梨。 梳的紋絲不亂的頭發(fā)上沿腰,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天,我揣著相機(jī)與錄音狈定,去河邊找鬼颂龙。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的厘托。 我是一名探鬼主播友雳,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼稿湿,長吁一口氣:“原來是場噩夢啊……” “哼铅匹!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起饺藤,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤包斑,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后涕俗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體罗丰,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年再姑,在試婚紗的時候發(fā)現(xiàn)自己被綠了萌抵。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡元镀,死狀恐怖绍填,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情栖疑,我是刑警寧澤讨永,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站遇革,受9級特大地震影響卿闹,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜萝快,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一锻霎、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧揪漩,春花似錦旋恼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至嫩海,卻和暖如春冬殃,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背叁怪。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工审葬, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓涣觉,卻偏偏與公主長得像痴荐,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子官册,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 文/水湄青萍 01 老爹騎著他的老爺車帶我們在縣城的街道轉(zhuǎn)悠著生兆,車子因?yàn)槟隁q已久,時不時地發(fā)出一陣嘎吱嘎吱的聲響膝宁。...
    水湄青萍閱讀 1,169評論 4 16
  • cookie和緩存 Session是由應(yīng)用服務(wù)器維持的一個服務(wù)器端的存儲空間鸦难,用戶在連接服務(wù)器時,會由服務(wù)器生成一...
    縱我不往矣閱讀 428評論 0 1
  • C語言的字符串不是基本類型员淫,而是字符序列合蔽,可以把字符串看成一個以'\0'結(jié)尾的字符數(shù)組。'\0'其實(shí)是一種特殊字符...
    juconcurrent閱讀 575評論 0 0
  • Day2 拉薩 海拔3650m 起床后高反癥狀已經(jīng)消失介返。謝天謝地謝皇上我熬過來了拴事。 拉薩年均日照超過3000小時,...
    mmmgo閱讀 267評論 3 1
  • 我是在等待一個女孩, 還是在等待沉淪苦海捅彻。 一段情默默灌溉组去, 沒有人去管花謝花開。 無法肯定的愛步淹,左右搖擺从隆, 只好...
    賈小呆520閱讀 677評論 0 0