使用 Angular 添加带有组件内容的点击标签

Question

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

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

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

Answer 1

我的问题的解决方案是使用 *ngComponentOutlet

<mat-tab-group #tabgroup>
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab.caption">    
    <ng-container *ngComponentOutlet="tab.content"></ng-container>
  </mat-tab>
</mat-tab-group>


tabs = [{ caption: 'First', content: Content1Component }, { caption: 'Second', content: Content2Component }];
  
  constructor() { }

  ngOnInit(): void {
  }

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

使用 Angular 添加带有组件内容的点击标签

Add Tab on click with component content with Angular

angular-material

angular