如何为动态组件提供输入和输出答案

【问题标题】：How to provide Inputs and Output for dynamic components如何为动态组件提供输入和输出
【发布时间】：2019-04-17 15:30:12
【问题描述】：

我遇到了 ng-dynamic-component 包，同时与 Angular 的 ngComponentOutlet 无法实现的 @Inputs 和 @Outputs 交互作斗争。

在我的应用程序中，我想在*ngFor 中动态实例化不同类型的选项卡组件。

阅读ng-dynamic-component 文档、与@Inputs 和@Outputs 交互并不是在HTML 模板中，而是在组件实现本身中。

考虑到我需要遍历所有选项卡这一事实，每个选项卡需要获取不同的@Input，并根据其实例向@Outputs 订阅不同的数据，例如，

<ndc-dynamic *ngFor="let tab of tabs"
              [ndcDynamicComponent]="component"
              [ndcDynamicInputs]="inputs" <!-- this needs to be different for each tab-->
              [ndcDynamicOutputs]="outputs"> <!-- this needs to be different for each tab-->
</ndc-dynamic>

除了用inputs和outputs成员破坏我的标签对象，或者创建一个特殊的接口，比如：

interface DynamicTab {
  tab: Tab,
  inputs: any,
  outputs: any
}

知道如何实现这种行为吗？有什么方法可以充分利用*ngFor 并使用当前选项卡操作基本的inputs？

我可以在我的组件上创建两个方法来计算所需的输入和输出，但是所有这些选项似乎都需要太多的工作来操作我在运行 *ngFor 时已经拥有的当前 tab 数据

提前感谢您的任何见解！

【问题讨论】：

标签： javascript angular angular-dynamic-components ng-component-outlet

【解决方案1】：

我有下一个：

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs" label="{{tab.label}}">
    <ng-container *ngComponentOutlet="tab.component;injector:createInjector(tab.data)"></ng-container>
  </mat-tab>
</mat-tab-group>

选项卡是一个包含我的不同组件的数组对象，每个组件都放在每个选项卡中。

这是我关于标签的模型：

export interface CwcTabModel {
  label?: string;
  component?: any;
  data?: CwcDataTab;
}


export class CwcDataTab {
  data?: any;
}

CwcDataTab 是要发送到每个组件的数据，而注入器是传递数据的时候。

现在您可以创建一个测试组件，例如：

TestTabOneComponent：

@Component({
  selector: 'app-test-tab-one',
  templateUrl: './test-tab-one.component.html',
  styleUrls: ['./test-tab-one.component.scss']
})
export class TestTabOneComponent implements OnInit {

  information: string;

  constructor(private dataTab: CwcDataTab) {
   if (this.dataTab !== undefined && this.dataTab.data !== undefined) {
     this.information = this.dataTab.data;
   }
  }

}

然后为了使用组件选项卡，您可以在某些组件中创建对象选项卡：

tabs = [
  {
    label: 'TAB1',
    component: TestTabOneComponent, /* it will be a dynamic component, but data should be different*/
    data: {
      data: 'value1 valor distinto, mismo componente'
    }
  },
  {
    label: 'TAB2',
    component: TestTabOneComponent, /* it will be a dynamic component, but data should be different*/
    data: {
      data: 'value2 valor distinto, mismo componente'
    }
  },
{
    label: 'TAB3',
    component: TestTabOneComponent, /* it will be a dynamic component, but data should be different*/
    data: {
      data: 'value3 valor distinto, mismo componente'
    }
  }
];

并且每个选项卡使用相同的组件（可以是通用组件）并且在每个组件中您可以看到不同的数据。对不起我的英语，我希望你能用它。

【讨论】：