如何使用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：

最后的效果：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":