angular - 具有动态值的 ngTemplateOutlet

Question

我正在使用具有动态值的 ngTemplateOutlet。

<ng-container *ngFor="let part of objectKeys(config);">
    <ng-container *ngIf="config[part]">
        <ng-container [ngTemplateOutlet]="part"></ng-container>
    </ng-container>
</ng-container>

<ng-template #one></ng-template>
<ng-template #two></ng-template>

• 在哪里config是一个对象
• 在哪里config[part]是一个 bool 值
• 在哪里part是对象的键和传递给 ngTemplateOutlet 的值。

我总是得到错误:

ERROR TypeError: templateRef.createEmbeddedView is not a function

我关注了:https://stackoverflow.com/a/41241329/5627096

但也许我不能做那样的事情。

实际上配置对象包含 bool 值，就像我说的，并定义要显示的表单部分。

它真的很大，为了更好地阅读，我正在寻找拆分它的解决方案。

更新

配置对象看起来像:

config = {
    one: true,
    two: false
}

所以在我的表单中只有 <ng-template #one></ng-template>被陈列。如果我将两个设置为真，则两者都会显示。

我不知道这是否是最好的方法。我可以使用 *ngIf，但使用此解决方案时，我的代码实在是太难读了。

Answer 1

将这些添加到组件类

@ViewChild('one') one:TemplateRef<any>;
@ViewChild('two') two:TemplateRef<any>;

并使用

获取模板引用

<form no-validate (ngSubmit)="onSubmit(search)">
    <ng-container *ngFor="let part of objectKeys(config);">
        <ng-container *ngIf="config[part]">
            <ng-container [ngTemplateOutlet]="this[part]"></ng-container>
        </ng-container>
    </ng-container>
</form>

StackBlitz example