Angular4父组件向子组件传值

场景：由父组件输入值可以传到子组件

通过@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() {
  }
}