父子组件通讯与监听

一. 单输入型属性传递与监听

通常父子组件传递信息的方法:

  • 子组件通常含有输入型属性:通常带有@input()装饰器 。
  • 父组件通过*ngFor 来循环子组件模板,并把自己的属性通过属性绑定传递到子组件的输入型属性里。
    比如:
<app-child *ngFor="let parent of  parents " [child]="parent">
</app-child>

通过属性绑定,把parent传入子组件的child属性中,通常在子组件中,child是用@input()修饰的属性。

这个过程相当于调用了子组件的setter方法:

set child (parent){
  this.child=parent;
}

二. 当监听多个、交互式 输入型属性时:使用ngOnChanges()方法。

ngOnChanges():
当 Angular(重新)设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象。
当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit() 之前。

interface SimpleChanges {
  __index(propName: string): SimpleChange
}

class SimpleChange {
  constructor(previousValue: any, currentValue: any, firstChange: boolean)
  previousValue: any
  currentValue: any
  firstChange: boolean
  isFirstChange(): boolean
}

父组件实现onChange接口,在ngOnChanges(){}里实现响应。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容