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

Question

假设我有以下组件 Child。

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

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

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

上面的问题是它设置 [mySpecialFlag] 太晚了。我希望能够在 child 的任何生命周期方法运行之前，或者至少在 child 的 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一个演示。请注意，设置标志不需要私有(private)变量 _child 和 getter。我添加它们是为了防止您出于其他目的需要引用子组件。