Question

我正在努力将动态组件传递给父组件，这是我的问题，

我的模板和组件

<tabset [justified]="true">
  <tab heading="Test 1 ">
      // Default 
  </tab>
  // Dynamic tabs 
  <tab *ngFor="let tab of tabs" [heading]="tab.title" >
     // Dynamic contents
  </tab>
</tabset>



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

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.scss']
})
export class ContainerComponent implements OnInit {
  tabs: any[] = [
    {
      title: 'Test 2',
      content: AnyComponent
    },
    {
      title: 'Test 3',
      content: SomeOtherComponent
    }
  ];

  constructor() {

  }

  ngOnInit() {
  }

  addTab(tab: any) {
    this.tabs.push(tab);
  }

}

我需要什么...当我从其他组件（导航器）中单击菜单项时，它将使用addTab（）函数将容器传递给动态组件。它可以是AComponent BComponent等等，我尝试使用NGX Bootstrap来解决这个问题，但Ngx并没有通过html或其他东西传递组件（或者我不能） https://valor-software.com/ngx-bootstrap/#/tabs

Answer 1

首先，GünterZöchbauer说的是真的，如果你知道所有的组件，那么我的意思是类型（AnyComponent，OtherComponent，SomeotherComponent）然后使用

<anycomponent *ngFor=" let any of anycomponentsarray"><anycomponent>

另一个

<Othercomponent *ngFor=" let any of othercomponentsarray"><Othercomponent>

如果你想使用tab数组而不是像这样使用

<tab *ngFor="let tab of tabs" [heading]="tab.title" >

<div *ngIf="tab.content === anycomponent">
<anycomponent><anycomponent>
<div>

<div *ngIf="tab.content === othercomponent">
<othercomponent><othercomponent>
<div>
  </tab>

无论如何，如果可以避免，组件不应该像这样使用变量。使用服务进行组件之间的通信

this了解更多信息

如何动态地将组件传递给父组件

1 个答案: