Angular2組件模板在變量更改時更改

Question

我想要一個組件，該組件完全通過component變量生成其模板數據。

import { Component} from '@angular/core';
import { DataService } from '../../services/data.service';

@Component({
  selector: 'app-slot',
  template: '{{component}}',
  styleUrls: ['./slot.component.css']
})
export class SlotComponent  {
  private component:string;
  constructor(
    public dataService : DataService
  ) {
    this.component = '<app-menu id="1"></app-menu>';
  }

}

如果變量更改，則應呈現其他組件。 如果以這種方式嘗試，我得到的是' <app-menu id="1"></app-menu> '作為字符串。 但是我希望以這種方式呈現組件：

import { Component} from '@angular/core';
import { DataService } from '../../services/data.service';

@Component({
  selector: 'app-slot',
  template: '<app-menu id="1"></app-menu>',
  styleUrls: ['./slot.component.css']
})
export class SlotComponent  {
  private component:string;
  constructor(
    public dataService : DataService
  ) {

  }

}

有沒有一種方法可以明智地將角度解析為HTML？ 或另一種方式來做到這一點？

謝謝。

Answer 1

您可以在模板中使用ngIfs / switchCases根據條件放置組件，也可以使用動態組件加載器從ts文件加載組件。

例如。

<app-menu1 *ngIf="component === 'app-menu1'"></app-menu1>
<app-menu2 *ngIf="component === 'app-menu2'"></app-menu2>