具有异步加载选项卡内容的角度选项卡组。内容必须是另一个组成部分

Question

我正在尝试从ts文件传递组件标签，但将其作为字符串获取。请帮助

chat-list.component.ts

export interface ExampleTab {
  label: string;
  content: string;
 }

  asyncTabs: Observable<ExampleTab[]>;

constructor() {
this.asyncTabs = Observable.create((observer: Observer<ExampleTab[]>) => {
  setTimeout(() => {
    observer.next([
      {label: 'First', content: '<app-chart-finance></app-chart-finance>'},
      {label: 'Second', content:'<app-chart-finance></app-chart-finance>'},
      {label: 'Third', content: '<app-chart-finance></app-chart-finance>'},
    ]);
  }, 1000);
});

chat-list.component.html

<ng-container *ngIf="(asyncTabs | async) === null">
Loading tabs...
</ng-container>
<mat-tab-group>
 <mat-tab *ngFor="let tab of asyncTabs | async">
  <ng-template mat-tab-label>{{tab.label}}</ng-template>
  {{table.content}}
 </mat-tab>
</mat-tab-group>

我得到{{table.content}}作为字符串。但我想展示特定组件的外观。我将内容声明为字符串。也许这就是为什么我以字符串形式获取它。因此，我需要进行哪些更改才能获得所需的输出。

谢谢大家的支持。