Angular 2 dynamic tabs with user-click chosen components
https://www.lucidchart.com/techblog/2016/07/19/building-angular-2-components-on-the-fly-a-dialog-box-example/
在将输入和输出传递给那些动态创建的组件时,我在上面的第二个链接中找到了答案：
https://codedump.io/share/kQakwDKNu0iG/1/passing-input-while-creating-angular-2-component-dynamically-using-componentresolver
但是,如果我要创建一个名为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 / s的对象以及一些其他数据,并将创建的对象存储到数组中
>将其传递给孩子作为输入,
>让每个孩子将componentRef注入其DOM,并以其他方式使用对象中的其余数据.
这意味着服务调用组件不知道这些componentRef将被注入的位置.简而言之,我需要可以随时随地注入的独立组件对象.
我已经好几次读过rumTimeCompiler解决方案,但我真的不知道它是如何工作的.与使用viewContainerRef创建组件相比,似乎有太多工作要做.如果我找不到其他解决方案,我会深入研究一下……
解决方法
据我所知,您需要在服务中使用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;
}
}
