Templates 如何避免在角度'；s模板

我想知道避免在模板中使用多个*ngIf的最佳方法是什么。例如，在组件的模板中，根据路线，我必须生成多个不同的元素，如下所示：

第1页的标题
第2页的标题
...

它很快就会变得混乱，所以我想出了一个解决方案，在这个组件的ts文件中，我定义了一个数组：

arr_1=[
{键入：“文本”，内容：“第1页标题”}，
{type:“icon”，class:“fa-fa-message”}，
{类型：“按钮”，内容：“…”}
]
arr_2=[
{键入：“文本”，内容：“第2页标题”}，
{类型：“图标”，类：“fa-fa-bell-o”}，
{键入：“菜单”，菜单子项：[……]，类：“菜单”}
]

在其模板中：

我创建了一个GeneratorComponent，它接收类型并生成相应的元素：

@组件({
选择器：'生成器'，
...
})
导出类生成器组件{
@Input（）类型：string；
@Input（）内容：字符串；
@Input（）类：string；
@Input（）菜单\u子项：字符串；
}

GeneratorComponent的模板：

{{content}
{{content}}
...

这里的问题是类GeneratorComponent将具有多个属性，并且它们不被使用的原因只有一个（例如：内容和菜单子项没有关系）

你有什么办法解决我的问题吗？其他解决方案将不胜感激

谢谢

<div [ngSwitch]="route">
   <generator  ngSwitchWhen="page1" *ngFor="let ele of arr_1"
        [type]="ele.type"
        [class]="ele.class"
        [content]="ele.content"
        [menu_children]="ele.menu_children">
    </generator>
    <generator ngSwitchWhen="page2" *ngFor="let ele of arr_2"
        [type]="ele.type"
        [class]="ele.class"
        [content]="ele.content"
        [menu_children]="ele.menu_children">
    </generator>
</div>

您可以使用helper元素

。它允许应用结构指令

*ngIf

，

*ngFor

，…，而无需实际向DOM添加元素

第1页的标题
...
第2页的标题

如果它取决于路由，为什么不使用两个组件，并通过

路由器出口根据当前路由显示正确的组件

i、 e.拥有Page1组件和Page2组件，并在相应的routing.ts文件中为它们配置路由

[
..
{
    path: 'page1',
    component: Page1Component,
  },
{
    path: 'page2',
    component: Page2Component,
  },
]

---

然后每个页面组件都可以精确地定义应该显示的内容。

ngSwitch可能吗？我不知道

生成器组件有什么问题

谢谢@Gunter我没有遇到

ng容器

，这会很方便