(十一)、Angular4.0 输入属性

一、父组件给子组件输入值

二、创建一个angular项目 demo2

三、在项目中创建一个order组件用于测试

ng g component order

四、在order.component.ts中定义两个属性，并且每三秒重置stockCode属性(鼠疫属性要加上@Input()注解)

export class OrderComponent implements OnInit {

  @Input()
  stockCode: string;
  @Input()
  amount: number;

  constructor() {
    setInterval(() => {
      this.stockCode = 'apple';
    }, 3000);
  }

  ngOnInit() {
  }

}

五、在app.component.ts中定义一个空字符串的属性stock用来传值给子组件的stockCode

export class AppComponent {
  stock = '';
}

六、app.component.html获取input输入的stock值，传递给app-order的stockCode

<div>
  <input type="text" placeholder="请输入值" [(ngModel)]="stock">
  <app-order [stockCode]="stock" [amount]="100"></app-order>
</div>

七、order.component.html 展示父组件输入的值

<div>
  买入{{amount}}手{{stockCode}}股票
</div>

八、启动项目访问localhost:4200测试