(1) 引入@Input()：

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

(2) 在需要使用@Input的Component內(nèi)，聲明一個product屬性(property)：
@Input() product;

現(xiàn)在我們可以在該Component的模板內(nèi)，使用product屬性名進(jìn)行訪問了：

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

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

相當(dāng)于把父組件的數(shù)據(jù)通過中括號傳遞給了子組件。

最后的效果：

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

總結(jié)

以上是生活随笔為你收集整理的如何使用Angular的@Input()装饰器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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