动态组件

Question

在视图中动态显示组件的正确方法是什么？

作为一个例子，我有一个具有导航和视图的组件。单击导航中不同子组件的按钮应在视图中显示/消失。每个子组件都是不同的类型。

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(PROJECT_ROOT), "media_cdn")

-

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

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>