未调用 ng 内容中的组件构造函数

Question

在 Angular 8 项目中，我有父组件，它的 ng 内容带有 *ngIf。出于某种原因，ng-content 中的任何子组件只创建一次。这是堆栈闪电战示例，我在其中隐藏内容，然后重新显示它。单击按钮，在控制台中，您可以看到构造函数或onInit仅在第一次渲染时调用一次。

是错误吗？如果不是，如何强制重新创建我的内容？顺便说一句，如果我做<div>而不是<ng-content>那么一切都很好。

编辑：我刚刚用新建议更新了堆栈闪电战。仍然无法正常工作:(

Answer 1

您必须在模板内移动<ng-content>，然后有条件地呈现模板。我不确定原因，但似乎 Angular 只会解决一次内部内容。

当一个模板被渲染时，Angular 将解析<ng-content>，因为模板的视图是重新创建的。

<ng-container *ngIf="condition">
<ng-container *ngTemplateOutlet="contentRef"></ng-container>
</ng-container>
<ng-template #contentRef">
<ng-content></ng-content>
</ng-template>

Answer 2

您可以使用ContentChild 访问您的 testComponent，然后您可以调用 testComponent 的任何方法。由于您希望具有不同的"测试组件"，请记住为您的组件(*(提供一个模板引用变量

<app-cont>
<app-test #test></app-test>
</app-cont>

您的计数组件

@ContentChild('test',{static:false}) test:any
reload() {
this.show = false;
setTimeout(() => {
this.show = true;
this.test.ngOnInit()
}, 1000);
}

查看堆栈闪电战

(*( ContentChild 也接受类似

@ContentChild(TestComponent,{static:false}) text:TestComponent

但这只有在内容是测试组件时才找到它