输入属性的定义:输入属性是被@input()装饰器注解的属性,用来从父组件接收数据,然后传递给子组件。
特点:输入属性的数据绑定是单向的,只能是父组件到子组件。
示例代码:
//子组件order.html
<div>这是子组件app-order</div>
<div>
我要购买名称是:{{stockCode}}的股票,一共购买{{account}}股
</div>
//子组件order.js
export class OrderComponent implements OnInit {
@Input()
stockCode:string
@Input()
account:number
}
//父组件app.html
<div>
<div>这是父组件app</div>
<div>
<input type="text" [(ngModel)]="stockName" >
<app-order [stockCode]="stockName" [account]="stockNum"></app-order>
</div>
</div>
//app.js
export class AppComponent {
title = 'app';
stockName:string="";
stockNum:number=1000;
}
重点:父组件的属性stockName通过@Input()注解的属性[stockCode]="stockName"传递给了子组件的stockCode属性
小技巧:在angular的新版本中,如果用到了表单元素,需要在跟模块app.module.ts中手动引入FormsModule.