Javascript 在html页面中按typescript打印html标记

这是一个有角度的应用程序。 我想在另一个组件中调用一个组件。 所以，如果我这样写第一个组件，使用第二个组件的选择器调用第二个组件：

html:

<div>
    <app-nice-component></app-nice-component>
</div>

let x: string[] = [{<app-nice-component></app-nice-component>},{<app-nice2-component></app-nice2-component>}]

<div>
    {{x[0]}}
</div>

一切正常

但是我有很多组件，如果我尝试从一个数组中执行相同的操作，它不再是一个HTML标记，而是一个字符串（我的第二个组件不再加载）

ts:

<div>
    <app-nice-component></app-nice-component>
</div>

let x: string[] = [{<app-nice-component></app-nice-component>},{<app-nice2-component></app-nice2-component>}]

<div>
    {{x[0]}}
</div>

让x:string[]=[{}，{}]

html:

<div>
    <app-nice-component></app-nice-component>
</div>

let x: string[] = [{<app-nice-component></app-nice-component>},{<app-nice2-component></app-nice2-component>}]

<div>
    {{x[0]}}
</div>

{{x[0]}

---

那么，在第二种情况下，如何使其成为HTML标记，而不是字符串呢？

我建议您阅读下一篇关于Angular中的dynamic component loader的文档：

您需要动态加载组件。步骤：

创建一个指令，告知HTML代码在何处加载组件：

@Directive({
    selector: '[myDirective]'
})
export class MyDirective {
    constructor(public viewContainerRef: ViewContainerRef) { }
}

将带有新指令的HTML设置为ng模板，不要忘记在使用该指令的模块中添加该指令

<div>
    Component loading:
    <ng-template myDirective></ng-template>
</div>

---

我认为，您试图实现的目标将给您带来许多有关

AOT

编译的问题