場景：由父組件輸入值可以傳到子組件

通過@Input傳值

先定義一個(gè)子組件

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>

雙向數(shù)據(jù)綁定會報(bào)錯(cuò)# Angularjs2-Can't bind to 'ngModel' since it isn't a known property of 'input'.......
解決辦法是在app.module.ts的imports加入 FormsModule

官方文檔.png

最終效果.png

以上的例子只能通過父組件向子組件傳值

通過路由參數(shù)傳值

export class OrderComponent implements OnInit {
  @Input()
  stockCode:string;
  @Input()
  amout:number
  constructor(routeInfo: ActivatedRoute) { 
    setInterval(){
      this.stockCode = "Apple";
    },3000)
  }
  ngOnInit() {
  }
}