900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > angular4.0的输入属性@Input()

angular4.0的输入属性@Input()

时间:2024-05-24 16:54:03

相关推荐

angular4.0的输入属性@Input()

输入属性的定义:输入属性是被@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.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。