Angular4的输入属性

来源:互联网 发布:php 随机昵称 编辑:程序博客网 时间:2024/06/06 18:42

输入属性通常用于父组件向子组件传递信息
举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order
首先在app.order.component.ts中声明需要由父组件传递进来的值

order.component.ts

...@Input()stockCode: string@Input()amount: string...

order.component.html

<p>这里是子组件</p><p>股票代码为{{stockCode}}</p><p>股票总数为{{amount}}</p>

然后我们需要在父组件(app.component)中向子组件传值

app.component.ts

...stock: string...

app.component.html

<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock"><app-order [stockCode]="stock" [amount]="100"></app-order>

这里我们使用了Angular的双向数据绑定,将用户输入的值和控制器中的stock进行绑定。然后传递给子组件,子组件接收后在页面显示。

0 0
原创粉丝点击