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

(1) 引入@Input():

import { Input } from ‘@angular/core’; 如何使用Angular的@Input()装饰器

(2) 在需要使用@Input的Component内,声明一个product属性(property):

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

现在我们可以在该Component的模板内,使用product属性名进行访问了:

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

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


(3) 在需要使用该Component的parent模板里,使用Component的selector 插入包含了@Input的Component:

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

相当于把父组件的数据通过中括号传递给了子组件。

最后的效果:

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

上一篇:Spring(02)——bean实例化


下一篇:源码分析 There is no getter for property named '*' in 'class java.lang.String(2)