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

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

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

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

Спасибо !


angular design-patterns templates generator angular-ng-if
person Trong Lam Phan    schedule 18.01.2017    source источник
comment
ngSwitch может быть?   -  person Ajey    schedule 19.01.2017
comment
У меня нет проблемы с GeneratorComponent   -  person Günter Zöchbauer    schedule 19.01.2017

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать вспомогательный элемент <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>
person Günter Zöchbauer    schedule 19.01.2017
comment
Спасибо @Gunter, я не встречал ng-container, это пригодится - person Garth Mason; 19.01.2017

arrow_upward
0
arrow_downward

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

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

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

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

person Garth Mason    schedule 19.01.2017