编辑

Question

是否可以通知父组件以加载子组件，尤其是在涉及ng-container和ng-template时。
如Yes! I see that you've grown strong, my child!

说我们有一个像这样的组件：

@Component({
  selector: 'my-app',
  template: `
  <ng-container *ngIf="!showElse; else elseBlock">
    <h1>Hi!</h1>
  </ng-container>
  <ng-template #elseBlock>
    <hello name="{{ name }}"></hello>
  </ng-template>
  <button (click)="showElse = !showElse">Show else</button>
  `,
  styles: ['']
})
export class AppComponent  {
  name = 'Angular';
  showElse = false;
  @ViewChild('hello') hello: HelloComponent;
}

AppComponent是否有办法知道HelloComponent是否已满载？还是我需要在HelloComponent内部使用自定义解决方案？

我目前正坐在一个不太理想的解决方案上（我不喜欢基于setTimeout()的东西）。
这就是我的想法：
-将EventEmitter添加到我的HelloComponent中；
-使用HelloComponent的生命周期在ngAfterContentChecked
期间发出事件 -在我的AppComponent中拦截此事件并执行操作。

您对该主题有何看法？

编辑

到目前为止，我已经尝试了您的建议（挂钩AfterViewInit，使用@ViewChildren ...），但没有成功。
可以肯定的是，我没有<ng-container>...<ng-template>的东西再次尝试，只是使用HelloComponent指令隐藏了我的[hidden] ...

通过在HelloComponent的{{1}}期间发出一个事件并将此事件挂在AfterContentChecked中，它的工作原理就像一种魅力。（请参见on stackblitz）
此解决方案比我以前的基于AppComponent的解决方案更为优雅

现在，我想使用setTimeout机制的原因是因为我的实际组件只是比示例<ng-container>...<ng-template>重的微小的。
如果有人有更好的主意继续使用容器模板机制，那我就耳熟能详。

Answer 1

就像您建议的那样，在生命周期挂钩AfterContentChecked（）中使用EventEmitter向您的父组件发出事件。它很简单，并正确使用了Angular的生命周期API。 https://angular.io/guide/lifecycle-hooks#lifecycle-sequence

Answer 2

您可以附加到AfterViewInit上，但并非总是如此，请考虑您的子组件上有*ngIf，那么您需要这样做。

private helloPlaceholder: ElementRef;

 @ViewChild('hello') set hello(content: HelloComponent) {
    this.helloPlaceholder = content;
    // you can check and do your stuff here
 }

Answer 3

您可以在父级组件中使用 ngAfterVIewChecked ，它告诉父级组件angular已完成所有子级的变化检测

因此，如果您有5个子组件，则可以知道所有子视图的更新时间，但是您不知道特定子组件是否已更新

Angular-生命周期：子组件将完全加载

编辑

3 个答案: