Angular 9：从 ElementRef 获取组件

Question

I have Directive that I would apply to the form. It suppose to get all components MyFormWrapper inside this form and on form submit() should call method activate() for each. Since Directive doesn't have view I can not use @ViewChildren and @ContentChildren.

My plan is to scan through DOM tree and get ElementRefs of the <my-form-element> . That part is easy. What I am missing now is how to convert ElementRef into MyFormWrapper component instance. Any idea how to solve this problem?

Answer 1

I think you want to upgrade a ElementRef to a ComponentRef.

I think this code backward is what you need:

// constructor services
private readonly renderer: Renderer2,
private readonly resolver: ComponentFactoryResolver,
private readonly injector: Injector,
private readonly app: ApplicationRef

// Generation
const factorySpinner: ComponentFactory<MatSpinner> = this.resolver.resolveComponentFactory(MatSpinner);
const refSpinner: ComponentRef<MatSpinner> = factorySpinner.create(this.injector);
this.app.attachView(refSpinner.hostView);
refSpinner.instance.color = "accent";
refSpinner.instance.diameter = 24;
const elSpinner: ElementRef<MatSpinner> = refSpinner.location;
const oSpinner: MatSpinner = elSpinner.nativeElement;