Question

假设我具有以下组件Child。

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

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

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

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

Answer 1

在父级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来设置标志。我添加了它们，以防您出于其他目的需要引用子组件。

Answer 2

我相信您可以使用ngOnInit方法。请参考此链接以解释角度生命周期挂钩：https://angular.io/guide/lifecycle-hooks

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

2 个答案: