如何使用Angular的@Input()裝飾器

(1) 引入@Input()：

import { Input } from ‘@ angular /core’;

(2) 在需要使用@Input的Component内，聲明一個product屬性(property)：

@Input() product;

現在我們可以在該Component的模闆内，使用product屬性名進行通路了：

<p *ngIf="product.price > 700">
  <button>Notify Me</button>
</p>      

(3) 在需要使用該Component的parent模闆裡，使用Component的selector 插入包含了@Input的Component：

相當于把父元件的資料通過中括号傳遞給了子元件。

最後的效果：