如何使用Angular的@Input()装饰器

时间:2022-07-23
本文章向大家介绍如何使用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:

最后的效果: