我想在用户点击链接时动态创建一个标签。 Tab 应该被选中并且内容是一个组件。如果单击另一个链接，则应添加具有不同组件的选项卡。

<button mat-raised-button  (click)="addTab('Content 1','\<app-content1>\</app-content1>')">
  Add content1
</button>

<mat-tab-group #tabgroup>
  <mat-tab #blankTab>
  </mat-tab>

  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab.caption">
    {{ tab.content }}
  </mat-tab>
</mat-tab-group>


export class TesttabsComponent implements OnInit {

  tabs = [{ caption: 'First',content: '<p>first</p>' },{ caption: 'Second',content: '<p>second</p>' }];


  constructor() { }


  ngOnInit(): void {
  }

  addTab(caption: string,content: string) {
    this.tabs.push({ caption: caption,content: content });
  }
}

问题是点击它时会输出而不是评估组件