Шаблон компонента внутри другого компонента

У меня есть массив компонентов, хранящихся в основном компоненте. Они бывают разных типов. Я использовал директивы ngFor и ngSwitch, чтобы отобразить их все.

<div *ngFor="let component of components"
         [ngSwitch]="component.id">
        <component-a *ngSwitchCase="1"></component-a>
        <component-b *ngSwitchCase="2"></component-b>
        <component-c *ngSwitchCase="3"></component-c>
</div>

Этот подход довольно проблематичен, когда я добавляю новый тип, например. ComponentX, потому что мне нужно добавить еще один случай ngSwitch. Есть ли возможность сделать его более универсальным?


angular angular2-template angular2-components
person mankers    schedule 05.12.2016    source источник
comment
Возможный подход stackoverflow.com/questions/36325212/   -  person Günter Zöchbauer    schedule 05.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

У меня есть 3 решения в зависимости от того, чего вы пытаетесь достичь.

  1. Отбросьте операторы ngSwitch и оберните шаблон каждого компонента в *ngIf. Вам нужно будет создать службу для размещения наблюдаемых данных, используемых для определения того, какие из них будут отображаться (т.е. логика, используемая в вашем операторе swith). затем вы введете эти данные в каждый.
  2. Угловой маршрутизатор также является опцией.
  3. (Я подозреваю, что это лучшее решение) В зависимости от того, насколько длинный ваш список компонентов, вы можете просто перечислить их все и добавить *ngIf для каждого и сохранить логику компонента.

Важен ли вообще порядок компонентов в массиве? Кроме того, сколько там компонентов?

person Nate May    schedule 07.12.2016