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

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...