我正在使用具有动态值的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]
是布尔值part
是对象的关键字,值传递给ngTemplateOutlet。我总是得到错误:
ERROR TypeError: templateRef.createEmbeddedView is not a function
我已关注:https://stackoverflow.com/a/41241329/5627096
但也许我不能做那样的事情。
实际上,配置对象包含布尔值,就像我说的那样,并定义要显示的表单部分。
这是一个非常大的形式,为了更好的阅读,我正在寻找一个解决它的解决方案。
更新
配置对象看起来像:
config = {
one: true,
two: false
}
所以在我的表单中只显示<ng-template #one></ng-template>
。如果我将两个变为true,则显示两者。
我不知道这是否是最佳方法。我可以使用* ngIf,但是使用这个解决方案,我的代码实在太难以理解了。
答案 0 :(得分:11)
将这些添加到组件类
@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>
答案 1 :(得分:0)
templateRefs
中的templateRef的引用
数组.ts文件
export class RenderTemplateRefsInNgTemplateOutletDirective {
@ViewChild('one', { static: false }) one:TemplateRef<any>;
@ViewChild('two', { static: false }) two:TemplateRef<any>;
@ViewChild('three', { static: false }) three:TemplateRef<any>;
templateRefs: Array<TemplateRef<any>> = [];
config: any = {
'one': true,
'two': false,
'three': true,
}
objectKeys = Object.keys;
ngAfterViewInit() {
const values = Object.keys(this.config).filter(key => this.config[key]);
values.forEach(key =>{
this.templateRefs.push(this[key]); // accessing **this** component ViewChild
// with same **name** defined as `key` in forEach
})
}
}
.html
<ng-container *ngFor="let template of templateRefs">
<ng-container [ngTemplateOutlet]="template"></ng-container>
</ng-container>
<ng-template #one>
<h1>Hello One</h1>
</ng-template>
<ng-template #two>
<h1>Hello Two</h1>
</ng-template>
<ng-template #three>
<h1>Hello Three</h1>
</ng-template>