[英]How to provide Inputs and Output for dynamic components
我遇到了ng-dynamic-component包,同时在与 Angular 的ngComponentOutlet
无法实现的@Input
和@Output
交互中挣扎。
在我的应用程序中,我想在*ngFor
动态实例化不同类型的选项卡组件。
阅读ng-dynamic-component文档,与@Input
s 和@Output
s 交互不在 HTML 模板中,而是在组件实现本身中。
考虑到我需要遍历所有选项卡的事实,每个选项卡都需要获取不同的@Input
并根据其实例将不同的数据订阅到@Output
s,例如,
<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
数据
提前感谢您的任何见解!
我有下一个:
<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'
}
}
];
并且每个选项卡使用相同的组件(可以是通用组件)并且在每个组件中您可以看到不同的数据。 对不起我的英语,我希望你能使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.