angular 2 – 如何使用服务的输入/输出动态创建组件实例并将其单
在角度2中创建动态组件时,我发现此过程需要ViewContainerRef才能将新创建的组件添加到DOM.
Angular 2 dynamic tabs with user-click chosen components 在将输入和输出传递给那些动态创建的组件时,我在上面的第二个链接中找到了答案: 但是,如果我要创建一个名为shape.service的服务,其中包含使用bgColor等输入返回不同形状组件的函数,我不知道该服务如何在不指定DOM位置的情况下创建组件,以及容器组件如何接收这个返回的组件(可能是它的类型将是ComponentRef)来自服务并将其注入DOM容器组件指定. 例如,服务包含一个功能: getCircle(bgColor:string): ComponentRef<Circle> { let circleFactory = componentFactoryResolver.resolveComponentFactory(CircleComponent); let circleCompRef = this.viewContainerRef.createComponent(circleFactory); circleCompRef.instance.bgColor = bgColor; return circleCompRef; } 第一个问题在这里提出,我如何使this.viewContainerRef指向其他地方为何?我导入viewContainerRef的原因是动态创建组件. 第二个问题是在容器组件从服务接收input-specificcomponentRef之后,它将如何注入其DOM? 提前致谢! 更新: >父组件调用服务并获取componentRef / s, 这意味着服务调用组件不知道这些componentRef将被注入的位置.简而言之,我需要可以随时随地注入的独立组件对象. 我已经好几次读过rumTimeCompiler解决方案,但我真的不知道它是如何工作的.与使用viewContainerRef创建组件相比,似乎有太多工作要做.如果我找不到其他解决方案,我会深入研究一下…… 解决方法
也许这个plunker会帮助你:
https://plnkr.co/edit/iTG7Ysjuv7oiDozuXwj6?p=preview
据我所知,您需要在服务中使用ViewContainerRef. (只是一个服务..请参阅plunker完整的工作示例) import { Injectable,ViewContainerRef,ReflectiveInjector,ComponentFactoryResolver,ComponentRef } from '@angular/core'; import { HelloComponent,HelloModel } from './hello.component'; @Injectable() export class DynamicCompService { constructor (private componentFactoryResolver: ComponentFactoryResolver) { } public createHelloComp (vCref: ViewContainerRef,modelInput: HelloModel): ComponentRef { let factory = this.componentFactoryResolver.resolveComponentFactory(HelloComponent); // vCref is needed cause of that injector.. let injector = ReflectiveInjector.fromResolvedProviders([],vCref.parentInjector); // create component without adding it directly to the DOM let comp = factory.create(injector); // add inputs first !! otherwise component/template crashes .. comp.instance.model = modelInput; // all inputs set? add it to the DOM .. vCref.insert(comp.hostView); return comp; } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |