我想知道避免在模板中使用多个* ngIf的最佳方法是什么。例如,在组件的模板中,取决于路由,我必须生成多个不同的元素,如:
<div *ngIf="route == 'page1'">Title for page 1</div>
<div *ngIf="route == 'page2'">Title for page 2</div>
<i *ngIf="route == 'page1'" class="fa fa-message"></i>
<i *ngIf="route == 'page2'" class="fa fa-bell-o"></i>
<div *ngIf="route == 'page1'">
<button>...</button>
</div>
<div *ngIf="route == 'page2'">
<div class="menu"></div>
</div>
它很快就会变得混乱,所以我想出了一个解决方案,在这个组件的ts文件中,我定义了一个数组:
arr_1 = [
{ type: "text", content: "Title for page 1" },
{ type: "icon", class: "fa fa-message" },
{ type: "button", content: "..." }
]
arr_2 = [
{ type: "text", content: "Title for page 2" },
{ type: "icon", class: "fa fa-bell-o" },
{ type: "menu", menu_children: [...], class: "menu" }
]
在其模板中:
<div *ngIf="route == 'page1'">
<generator *ngFor="let ele of arr_1"
[type]="ele.type"
[class]="ele.class"
[content]="ele.content"
[menu_children]="ele.menu_children"
>
</generator>
</div>
<div *ngIf="route == 'page2'">
<generator *ngFor="let ele of arr_2"
[type]="ele.type"
[class]="ele.class"
[content]="ele.content"
[menu_children]="ele.menu_children"
>
</generator>
</div>
我创建了一个GeneratorComponent,它接收类型并生成相应的元素:
@Component({
selector: 'generator',
...
})
export class GeneratorComponent {
@Input() type: string;
@Input() content: string;
@Input() class: string;
@Input() menu_children: string;
}
GeneratorComponent的模板:
<div *ngIf="type == 'text'">{{ content }}</div>
<i *ngIf="type == 'text'">{{ content }}</i>
...
这里的问题是类GeneratorGeonent将具有多个属性,并且出于一个原因不使用它们(例如:content和menu_children没有关系)。
您有什么想法来解决我的解决方案吗?其他解决方案将不胜感激。
谢谢!
答案 0 :(得分:3)
您可以使用辅助元素<ng-container>
。它允许应用结构指令*ngIf
,*ngFor
,...,而不实际向DOM添加元素
<ng-container *ngIf="route == 'page1'">
<div>Title for page 1</div>
<i class="fa fa-message"></i>
<div>
<button>...</button>
</div>
</ng-container>
<ng-container *ngIf="route == 'page2'">
<div>Title for page 2</div>
<i class="fa fa-bell-o"></i>
<div>
<div class="menu"></div>
</div>
</ng-container>
答案 1 :(得分:0)
<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>
答案 2 :(得分:0)
如果它取决于路线,为什么不有两个组件,并通过router-outlet
即。有一个Page1Component和Page2Component,并在相应的routing.ts文件中为它们配置路由
[
..
{
path: 'page1',
component: Page1Component,
},
{
path: 'page2',
component: Page2Component,
},
]
然后每个页面组件都可以准确定义应该显示的内容。