当ngIf为false时,将构建Angular4 ng-content

Question

我有新的翻译问题ng-content.

假设我有一个组件my-component,在其ngOnInit()函数中对加载执行一些繁重的操作(现在,只是一个console.log()).

我有一个包装器,它通过transclusion(my-wrapper.component.html)显示内容.

<ng-content></ng-content>

如果我像这样设置周围环境,则日志语句不会显示:

<my-wrapper *ngIf="false">
    <my-component></my-component>
</my-wrapper>

我假设,my-wrapper组件没有构建,因此内容被忽略.

但是,如果我尝试将逻辑移动到my-wrapper像这样的组件(my-wrapper.component.html):

<ng-container *ngIf="false">
    <ng-content></ng-content>
</ng-container>

我总是看到console.log()输出.我猜,它my-component会被构建然后存储起来直到*ngIf变成true里面my-wrapper.

目的是建立一个通用的"列表项+细节"组件.假设我有一个N overview-elements(my-wrapper)列表,它们在*ngFor循环中呈现.my-component一旦我决定向特定项目显示更多信息,那么每个元素都有自己的详细信息组件(),它应该加载自己的数据.

overview.html:

<ng-container *ngFor="let item of items">
    <my-wrapper>
        <my-component id="item.id"></my-component>
    </my-wrapper>
</ng-container>

我-wrapper.component.html:

<div (click)="toggleDetail()">Click for more</div>
<div *ngIf="showDetail">
    <ng-content></ng-content>
</div>

有没有办法告诉Angular,在有必要将其添加到页面之前忽略已转换的内容？类似于它在AngularJS中的表现.

Answer 1

基于@nsinreal的评论,我找到了答案.我发现它有点深奥,所以我想在这里发布它:

答案是有工作的ng-template和*ngTemplateOutlet.

在my-wrapper组件中,像这样设置模板(my-wrapper.component.html):

<div (click)="toggleDetail()">Click for more</div>
<div *ngIf="showDetail" [hidden]="!isInitialized">
    <ng-container *ngTemplateOutlet="detailRef"></ng-container>
</div>

注意,[hidden]没有必要,它隐藏了孩子的"原始"模板,直到它决定它已完成加载.只要确保,不要把它放在一个*ngIf,否则*ngTemplateOutlet永远不会被触发,导致什么都没发生.

要设置detailRef,请将其放在组件代码(my-wrapper.component.ts)中:

import { ContentChild, TemplateRef } from '@angular/core';

@Component({ ... })
export class MyWrapperComponent {
    @ContentChild(TemplateRef) detailRef;

    ...
}

现在,您可以像这样使用包装器:

<my-wrapper>
    <ng-template>
        <my-component></my-component>
    </ng-template>
</my-wrapper>

我不确定,为什么它需要如此复杂的"变通方法",以前在AngularJS中这么容易做到这一点.