Valor-software/ngx-bootstrap 将组件放入动态创建的内容中

Question

我正在尝试使用valor-software/ngx-bootstrap 创建动态选项卡，但我想将组件的选择器放在动态创建的选项卡内容中，

在文档示例中，我们有：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'demo-tabs-dynamic',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './dynamic.html'
})
export class DemoTabsDynamicComponent {
  tabs: any[] = [
    { title: 'Dynamic Title 1', content: 'Dynamic content 1' },
    { title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: 
true },
    { title: 'Dynamic Title 3', content: 'Dynamic content 3', 
removable: true }
  ];

  addNewTab(): void {
    const newTabIndex = this.tabs.length + 1;
    this.tabs.push({
      title: `Dynamic Title ${newTabIndex}`,
      content: `Dynamic content ${newTabIndex}`,
      disabled: false,
      removable: true
    });
  }

}

我希望能够做这样的事情：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'demo-tabs-dynamic',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './dynamic.html'
})
export class DemoTabsDynamicComponent {
  tabs: any[] = [
    { title: 'Dynamic Title 1', content: 'Dynamic content 1' },
    { title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: 
true },
    { title: 'Dynamic Title 3', content: 'Dynamic content 3', 
removable: true }
  ];

  addNewTab(): void {
    const newTabIndex = this.tabs.length + 1;
    this.tabs.push({
      title: `Dynamic Title ${newTabIndex}`,
      content: `<my-component></my-component>`, // Here is the change
      disabled: false,
      removable: true
    });
  }
}

Angular 将组件选择器清理为字符串有什么解决方法吗？

Answer 1

其实我采用了这种不需要在内容中路径任何html的方式

 <tabset >
    <tab *ngFor="let tabz of mainMenuTab.tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         (deselect)="tabz.active = false"
         [disabled]="tabz.disabled"
         [removable]="tabz.removable"
         (removed)="removeTabHandler(tabz)"
         [customClass]="tabz.customClass">
            <div [ngSwitch]="tabz?.content">
               <app-employees-menu *ngSwitchCase="'employee'">
               </app-employees-menu>
               <app-inventories-menu *ngSwitchCase="'inventory'">
               </app-inventories-menu>
               <app-customers-menu *ngSwitchCase="'customer'">
               </app-customers-menu>
            </div>
    </tab>
 </tabset>

所以基本上我已经放置了我可能拥有的所有可能的选项卡，并且基于我需要显示的选项卡，我将传递充当开关的内容，并且在模板中有一个 switchCase 显示选项卡匹配 switchCase。