我将动态地将组件与服务中的另一个组件进行比较,首先,在服务工厂中同时对两个组件进行创建,然后创建可以访问ViewContainer的组件。但是无法创建组件!
服务内容:
@Injectable({ providedIn: 'root' }) export class ModalService { componentRef: ComponentRef; constructor(private _modalService: BsModalService, private resolver: ComponentFactoryResolver, private injector: Injector) { } open(componentType: any) { const cOntentFactory= this.resolver .resolveComponentFactory(componentType); const templateFactory = this.resolver .resolveComponentFactory(ModalTemplateComponent); const compOnentRef= templateFactory.create(this.injector); componentRef.instance.container.createComponent(contentFactory); this._modalService.show(componentRef.componentType, {class: 'modal-lg', initialState: {data: {test:true}}); } }
零件 :
selector: 'lib-modal-template', template: `{{title}}
`, styleUrls: ['./modal-template.component.css'] }) export class ModalTemplateComponent implements OnInit { title:string; @ViewChild('container', {read: ViewContainerRef, static: true}) container: ViewContainerRef; }
例如:
this._modalService.open(NewUserForm,...);