看個(gè)具體的例子：

我有一個(gè)風(fēng)格為Master Detail的Angular應(yīng)用。下圖紅色高亮區(qū)域包含了一個(gè)hero detail Component，即下圖藍(lán)色高亮區(qū)域所示。

這兩個(gè)Component的selector可以在Chrome開發(fā)者工具的element標(biāo)簽頁(yè)里看到：

具體實(shí)現(xiàn)步驟：

(1) 在app.module.ts里導(dǎo)入app-heroes和app-hero-detail這兩個(gè)selector對(duì)應(yīng)的Component，并在NgModule里聲明：

(2) 在hero detail Component里定義一個(gè)Hero屬性，使用裝飾器@Input修飾，告知Angular，當(dāng)其他Component嵌入該Component時(shí)，需要將值綁定到這個(gè)輸入屬性上。

detail Component的html沒有特殊之處，顯示屬性hero對(duì)應(yīng)的字段：

(3) parent Component，即消費(fèi)這個(gè)detail Component的hero Component，將當(dāng)前l(fā)i里選中的hero實(shí)例綁定給detail Component使用@Input修飾的屬性hero:

<h2>My Heroes</h2><ul class="heroes"><li *ngFor="let hero of heroes"[class.selected]="hero === selectedHero"(click)="onSelect(hero)"><span class="badge">{{hero.id}}</span> {{hero.name}}</li> </ul><app-hero-detail [hero]="selectedHero"></app-hero-detail>

如果移除掉detail Component里的@Input修飾器，

會(huì)出現(xiàn)編譯錯(cuò)誤：

要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":

總結(jié)

以上是生活随笔為你收集整理的Angular 父子Component的数据绑定实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。