美文网首页
Angular4父组件向子组件传值

Angular4父组件向子组件传值

作者: 南蓝NL | 来源:发表于2017-11-19 20:21 被阅读0次

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

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

相关文章

网友评论

      本文标题:Angular4父组件向子组件传值

      本文链接:https://www.haomeiwen.com/subject/tjfpvxtx.html