Как избежать множественного ngIf в шаблоне Angular

Question

Я хотел бы знать, что является лучшим способом избежать использования нескольких шаблонов * 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> 

Это будет стать грязным в ближайшее время, так что я придумал решение, в файле этого компонента ерей , я определил массив:

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> 
... 

Проблема здесь класс GeneratorComponent будет иметь несколько свойств, и они не используются по одной причине (например, содержание и menu_children не имеют никакого отношения).

У вас есть идея исправить мое решение? Другие решения будут оценены.

Спасибо!

Answer 1

<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> 

Answer 2

Вы можете использовать вспомогательный элемент <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> 

Answer 3

Если это зависит от маршрута, то почему бы не иметь два компонента и отображение правильной, основанные на текущем маршруте через router-outlet

т.е. имеет Page1Component и Page2Component и настроить маршруты для них в соответствующем routing.ts файл

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

Затем каждый компонент страницы может определить точно WHA t.