我想实现一个像动态添加子组件的容器一样的组件.应在服务器端配置子组件的类型和数量.
所以到达表单服务器的模型可能如下所示：
export class ModelBase {
public data: any;
}
export class ModelA extends ModelBase {
public dataA: any;
}
export class ModelB extends ModelBase {
public dataB: any
}
简化的组件可能是这样的：
@Component({
selector: "component-base"
})
export class BaseComponent {
@Input() model: ModelBase;
}
@Component({
selector: "component-a",template: "<div>component-a</div>"
})
export class AComponent extends BaseComponent {
@Input() model: ModelBase;
}
@Component({
selector: "component-b",template: "<div>component-b</div>"
})
export class BComponent extends BaseComponent {
@Input() model: ModelBase;
}
以下是应用程序以及我希望如何使用我的组件：
@Component({
selector: 'app',template: `
<div *ngFor="#model of models">
<component-base [model]="model"></component-base>
</div>
`
})
export class App {
}
我希望’component-base’将被替换为基于’model’类型的具体实现.例如,使用component-a.
使用Angular 2可以实现这样的工作流吗？
解决方法
可能有更好的API来实现此功能：
https://github.com/angular/angular/pull/11235.
在此期间,请查看https://stackoverflow.com/a/36325468/5307109.您可能需要对其进行修改,以便您可以将数据通过它传递到目标组件并在加载时调用自定义组件挂钩.
使用上面描述的包装器,ComponentBase将拥有自己的模板,并将每个模型的相关组件注入包装器.
export class ModelA extends ModelBase {
dataA: any;
component: any = AComponent;
}
@Component({
selector: "component-base",template: `
<dcl-wrapper [type]="model.component" [init-data]="model"></dcl-wrapper>
`
})
export class BaseComponent {
@Input() model: ModelBase;
}
@Component({
selector: "component-a",template: "<div>component-a</div>"
})
export class AComponent {
@Input() model: ModelBase;
/**
* Custom hook you might create in DclWrapper.
*/
onDclInit(model: ModelBase) : void {
this.model = model;
}
}
