Динамические компоненты

Question

Каков оптимальный способ динамического отображения компонентов в представлении?

В качестве примера у меня есть компонент, который имеет навигацию и представление. При нажатии на кнопку в навигации различные подкомпоненты должны появиться/исчезнуть в представлении. Каждый из подкомпонентов имеет другой тип.

import { Component, Input } from '@angular/core'; 
import { Controls } from './controls.service'; 

@Component({ 
    selector: 'Controlpanel', 
    templateUrl: 'app/templates/controlPanel.component.html', 
    directives: Controls.directives() 
}) 
export class ControlPanelComponent { 
    controls = Controls.objects; 
    activeControl:string = Controls.objects[0].name; 
} 

-

<nav class="container-fluid"> 
    <div class="row"> 
      <a *ngFor="let control of controls" (click)="toggleControl(control.name, $event)" role="button" href="#" class=" text-uppercase"> 
       {{control.name}} 
      </a> 
    </div> 
</nav> 
<div> 
    <this is where i want the sub-component to appear/> 
</div> 

Answer 1

Вы можете сделать что-то подобное добавление каждого элемента управления, который вы хотите загрузить на свою форму и добавьте * ngIf для каждого элемента управления, но я бы не идти по этому пути.

Укажите, где вы хотите загрузить директиву. И создать childRoute, которая показывает компонент (директиву) вы хотите, чтобы показать:

<nav class="container-fluid"> 
    <div class="row"> 
      <a *ngFor="let control of controls" (click)="toggleControl(control.name, $event)" role="button" href="#" class=" text-uppercase"> 
       {{control.name}} 
      </a> 
    </div> 
</nav> 
<div> 
     <!-- this is where you show your sub-component t by routing --> 
    <router-outlet></router-outlet> 

    </div>