angular - 修改 TestBed.overrideComponent 中定义的组件

Question

我们正在使用

TestBed.overrideComponent(CoolComponent, {
    set: {
      template: '<div id="fake-component">i am the fake component</div>',
      selector: 'our-cool-component',
      inputs: [ 'model' ]
    }
  })

覆盖一个组件。

组件有一个我们在 ngOnInit 方法中配置的 ViewChild

@Component({
  selector: 'our-cool-component',
  templateUrl: 'cool.component.html'
})
export class CoolComponent implements OnInit, OnDestroy {
  @Input() model: SomeModel
  @ViewChild(CoolChildComponent) coolChildComponent;

  ngOnInit() {
    this.coolChildComponent.doStuff();
  }
}

CoolComponent 又位于 Wrapper 组件中。

当我们在 Wrapper fixture 上调用 fixture.detectChanges() 时，它会尝试构建 CoolComponent，但是当它调用 doStuff() 时它会立即终止，因为 CoolChildComponent 未定义。

有没有办法让 CoolComponent stub 它的 CoolChildComponent？我们似乎无法从 Wrapper 中获取它，因为它仅通过模板引用，而不是作为组件的属性。

Answer 1

ngOnInit() {
  this.coolChildComponent.doStuff();
}

应该是

ngAfterViewInit() {
  this.coolChildComponent.doStuff();
}

because

View child is set before the ngAfterViewInit callback is called.