时间戳

首页 > 解决方案 > 宿主组件改变子组件的行为

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

问题描述

假设我有以下组件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] 得太晚了。我希望能够在孩子的任何生命周期方法运行之前或至少在孩子的生命周期方法运行之前将此标志设置为 true ngAfterContentInit。这可能吗？

标签： javascriptangular

解决方案

在父组件中设置标志ngOnInit似乎有效：该标志是ngOnInit在子组件之前设置的。

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

请参阅此 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;
  }
}

请参阅此 stackblitz以获取演示。请注意，_child设置标志不需要私有变量和 getter。我添加了它们以防您出于其他目的需要引用子组件。

推荐阅读