是否可以通知父组件要加载子组件,特别是当涉及到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
中;在ngAfterContentChecked
期间使用HelloComponent
的生命周期发出一个事件,在我的AppComponent
中拦截此事件并执行此操作。
你对这个话题有什么看法?
编辑
到目前为止,我已经尝试了您的建议(挂钩到AfterViewInit
,利用@ViewChildren
...)但是没有成功。
为了确定,我再次尝试不使用<ng-container>...<ng-template>
内容,而只是使用[hidden]
指令隐藏我的HelloComponent
...
通过在HelloComponent
的AfterContentChecked
期间发出一个事件,并在AppComponent
中钩住这个事件,它就像一个护身符。(参见on stackblitz )
这个解决方案比我之前的基于setTimeout
__的解决方案更经典
现在,我想使用<ng-container>...<ng-template>
机制的原因是因为我的实际组件比示例HelloComponent
稍微重一点。
如果有人有更好的主意继续使用容器模板机制,我洗耳恭听。
发布于 2019-05-28 21:13:12
按照您的建议,在生命周期钩子AfterContentChecked()中使用EventEmitter向父组件发出事件。它很简单,并且适当地使用了Angular的生命周期API。https://angular.io/guide/lifecycle-hooks#lifecycle-sequence
发布于 2019-05-28 21:22:42
您可以附加到AfterViewInit
,但情况并不总是如此,考虑到您的子组件上有*ngIf
,那么您需要这样做。
private helloPlaceholder: ElementRef;
@ViewChild('hello') set hello(content: HelloComponent) {
this.helloPlaceholder = content;
// you can check and do your stuff here
}
https://stackoverflow.com/questions/56342917
复制相似问题