场景：由父组件输入值可以传到子组件
通过@Input传值
先定义一个子组件
ng g component order
在order.component.ts里面定义
这里是Input要记得引入 import { Component, OnInit ,Input} from '@angular/core'
export class OrderComponent implements OnInit {
@Input() //一定要写上@Input装饰器
stockCode:string;
@Input()
amout:number
constructor() { }
ngOnInit() {
}
}
order.component.html输入
<div>
我是子组件
</div>
<div>
买{{amout}}手{{stockCode}}股票
</div>
在父组件app.component.ts里面定义
export class AppComponent {
stock = "";
}
在父组件的模板app.component.html里面定义
<div>
我是父组件
</div>
<div>
<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amout]="100"></app-order>
</div>
双向数据绑定会报错# Angularjs2-Can't bind to 'ngModel' since it isn't a known property of 'input'.......
解决办法是在app.module.ts的imports加入 FormsModule
官方文档.png
最终效果.png
以上的例子只能通过父组件向子组件传值
通过路由参数传值
export class OrderComponent implements OnInit {
@Input()
stockCode:string;
@Input()
amout:number
constructor(routeInfo: ActivatedRoute) {
setInterval(){
this.stockCode = "Apple";
},3000)
}
ngOnInit() {
}
}
