看個具體的例子：

我有一個風格為Master Detail的Angular應用。下圖紅色高亮區域包含了一個hero detail Component，即下圖藍色高亮區域所示。

這兩個Component的selector可以在Chrome開發者工具的element標籤頁裡看到：

具體實現步驟：

(1) 在app.module.ts裡匯入app-heroes和app-hero-detail這兩個selector對應的Component，並在NgModule裡宣告：

(2) 在hero detail Component裡定義一個Hero屬性，使用裝飾器@Input修飾，告知Angular，當其他Component嵌入該Component時，需要將值繫結到這個輸入屬性上。

detail Component的html沒有特殊之處，顯示屬性hero對應的欄位：

(3) parent Component，即消費這個detail Component的hero Component，將當前li裡選中的hero例項繫結給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修飾器，

會出現編譯錯誤：