如何解决创建动态组件时如何提供自定义服务实例
在使用组件工厂解析器动态创建组件时,我想注入已经创建的服务实例。
假设我有 2 个组件
- 多选
- 数据输入
这些组件有自己的服务(组件特定的服务,不是在模块级别提供的)。
@Component({
selector: "app-data-entry",templateUrl: "./data-entry.component.html",styleUrls: ["./data-entry.component.css"],providers: [DataEntryService,MultipleChoiceService]
})
export class DataEntryComponent {
constructor(
private injector: Injector,private dataEntryService: DataEntryService,private componentFactoryResolver: ComponentFactoryResolver
) {}
@ViewChild("dynTypeHost",{ read: ViewContainerRef })
dynTypeHost: ViewContainerRef;
get source(): string {
return this.dataEntryService.multipleChoiceService.source;
}
onLoadMultipleChoiceClick() {
const resolver = this.componentFactoryResolver.resolveComponentFactory(
MultipleChoiceComponent
);
const injector = Injector.create({
parent: this.injector,providers: [
{
provide: MultipleChoiceService,useValue: this.dataEntryService.multipleChoiceService
}
]
});
this.dynTypeHost.createComponent(resolver,injector);
}
}
如果您看到方法 onLoadMultipleChoiceClick
它具有自定义注入器,我想传递由该组件创建的多项选择服务的实例,但它没有按预期工作。
你可以在这里看到演示
https://stackblitz.com/edit/angular-ivy-vnr7mx?file=src/app/data-entry/data-entry.component.ts
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。