angular中如何使用ngTemplateOutlet根据条件将不同模板作为输入

Question

我已经运行 Angular 12 应用程序，我想实现一个场景，我想显示不同的 html 模板，而不使用 ngTemplateOutlet 在父组件内创建组件。 所有不同的模板是一个单独的 html 个文件

父组件.html

<ng-container [ngTemplateOutlet]="templatePath"> 

<ng-template #test1></ng-template> // displays the content of test1.html
<ng-template #test2></ng-template> //  displays the content of test2.html

templatePath 基本上是 html 模板的路径，它将作为输入属性出现。

父组件.ts

templatePath = './test1.html'; // not sure how to fetch the html template, so added this

test1.html

<h1>Hello</h1>

这只是一个 html 模板文件。 我不想为此使用组件

test2.html

<h1>Welcome</h1>

这只是一个 html 模板文件。 我不想为此使用组件

我不确定 ngTemplateOutlet 是否是实现上述场景的正确方法。 请建议在 Angular 中可以使用什么来实现这种情况。

Answer 1

试试这个并使用您自己的 myVar 变量：

<ng-container *ngIf=“myVar === 1; then test1 else test2”></ng-container>
<ng-template #test1></ng-template> // displays the content of test1.html
<ng-template #test2></ng-template> //  displays the content of test2.html