Angular 动态选择ng模板

我有一些角度模板，我希望能够动态选择并显示在组件模板的特定区域中。下面是一些我正在尝试做的简化示例代码

我似乎用

@ViewChild

以这种方式“保存”对类属性的模板引用不起作用，或者我误解了这里的某些内容

在

示例.component.ts中

我还尝试过如下调试：

<pre class="border bg-light p-2">{{tmpls| json}}</pre>
<pre class="border bg-light p-2">{{selectedTmpl| json}}</pre>

{{tmpls|json}
{{selectedTmpl | json}}

但这只是显示了

INamedTmplExample

对象，省略了

template

属性

---

请告知，我不确定如何在这里完成我想做的事情。

尝试在

ngAfterViewInit

钩子中收集

ViewChild

元素：

public tmpls: INamedTmplExample [];

ngAfterViewInit() {
    this.tmpls = [
        { name: 'One', template: this.tmpl1},
        { name: 'Two', template: this.tmpl2},
    ];
}

---

public tmpls:INamedTmplExample[]=…

可能在

ViewChild

元素可用之前运行。也许您可以尝试在

ngAfterViewInit

中运行它。我不确定我是否理解您的意思，但请记住，这是示例代码，而且会有更多的模板。我不希望每次添加新模板时都要添加一个新的if语句，结果不得不使用

ngOnInit

。使用

ngAfterViewInit

给了我不相关的错误“无法读取未定义的属性'name'，即使我将属性

name

更改为其他名称，它仍然给了我该错误。idk这是怎么回事，但无论如何，这样做修复了它，使模板的东西也工作。

<pre class="border bg-light p-2">{{tmpls| json}}</pre>
<pre class="border bg-light p-2">{{selectedTmpl| json}}</pre>

public tmpls: INamedTmplExample [];

ngAfterViewInit() {
    this.tmpls = [
        { name: 'One', template: this.tmpl1},
        { name: 'Two', template: this.tmpl2},
    ];
}