如何为动态组件提供输入和输出
如何为动态组件提供输入和输出
提问于 2018-11-14 23:51:08
在处理Angular的ngComponentOutlet不可访问的@Input和@Output的交互时，我遇到了ng-dynamic-component包。
在我的应用程序中，我希望在*ngFor中动态实例化不同类型的选项卡组件。
阅读ng-dynamic-component文档，与@Input和@Output进行交互并不是在ng-dynamic-component模板中，而是在组件实现本身中。
考虑到我需要运行所有选项卡的事实，每个选项卡需要获得不同的@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>除了用inputs和outputs成员损坏我的选项卡对象，或者创建一个特殊的接口，例如：
interface DynamicTab {
tab: Tab,
inputs: any,
outputs: any
}你知道如何实现这样的行为吗？有什么方法可以很好地利用*ngFor并使用当前选项卡来操作基本的inputs吗？
我可以在我的组件上创建两个方法来计算所需的输入和输出，但是在使用*ngFor运行时，所有这些选项对于处理我已经拥有的当前tab数据来说似乎太麻烦了
提前感谢您的任何见解！
回答 1
Stack Overflow用户
发布于 2019-06-26 04:54:44
我有下一个：
<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>标签是一个具有不同组件的数组对象，每个组件都放在每个标签中。
这是我关于tab的模型：
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'
}
}
];并且每个选项卡使用相同的组件(可以是通用组件)，并且在每个组件中可以看到不同的数据。对不起，我的英语，我希望你能用得上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53304040
复制相关文章
相似问题