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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (9)

我遇到了ng-dynamic-component软件包,同时还在努力ngComponentOutlet应对Angular的无法管理的@Inputs和@Outputs交互。

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

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

考虑到我需要遍历所有选项卡的事实,每个选项卡需要变得不同,@Input@Output根据其实例订阅不同的数据,例如,

<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>

除了使用inputsoutputs成员破坏我的tab对象,或者创建一个特殊的界面,例如:

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

知道如何实现这样的行为吗?一些方法来充分利用*ngFor和操纵inputs当前标签的基本?

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

提前感谢任何见解!

提问于
用户回答回答于

我有下一个:

<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是发送到每个组件的数据,并且注入器是在传递数据时。

现在您可以创建一个Test组件,例如:

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'
    }
  }
];

每个选项卡使用相同的组件(可以是通用组件),在每个组件中,您可以看到不同的数据。对不起我的英文,我希望你能用它。

扫码关注云+社区

领取腾讯云代金券