javascript-主机组件更改子组件的行为

假设我有以下组件Child.

@Component({...})
class Child {
  @Input() mySpecialFlag: boolean;
}

Child既可以用作独立组件,也可以被特殊组件包装,以“监视” Child的行为.当独立使用Child时,用户可以选择将[mySpecialFlag]设置为true或false.当在Special中使用Child时,我希望Special组件通过类似以下内容来强制输入[mySpecialFlag]为true：

@Component({...})
class Special {
  @ContentChild(Child) child;
  ...
  ngAfterContentInit() {
    this.child.mySpecialFlag = true;
  }
} 

上面的问题是它设置[mySpecialFlag]为时已晚.我希望能够在运行子项的任何生命周期方法之前或至少在运行子项的ngAfterContentInit之前将此标志设置为true.这可能吗？

最佳答案

在父级的ngOnInit中设置标志似乎可行：该标志设置在子组件的ngOnInit之前.

ngOnInit() {
  this.child.mySpecialFlag = true;
}

演示请参见this stackblitz.

尽早访问子组件的另一种方法是将@ContentChild装饰器关联到getter / setter属性,并在setter中设置子标志：

export class ParentComponent {

  private _child: ChildComponent;

  @ContentChild(ChildComponent) get child(): ChildComponent {
    return this._child;
  }
  set child(val: ChildComponent) {
    this._child = val;
    this._child.mySpecialFlag = true;
  }
}

演示请参见this stackblitz.请注意,不需要使用私有变量_child和getter来设置标志.我添加了它们,以防您需要出于其他目的引用子组件.