美文网首页
父子组件通讯与监听

父子组件通讯与监听

作者: 柳源居士 | 来源:发表于2018-11-16 23:37 被阅读3次

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

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

    • 子组件通常含有输入型属性:通常带有@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(){}里实现响应。

    相关文章

      网友评论

          本文标题:父子组件通讯与监听

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