Angular 9：从 ElementRef 获取组件答案

【问题标题】：Angular 9: get Component from ElementRefAngular 9：从 ElementRef 获取组件
【发布时间】：2020-10-11 00:59:33
【问题描述】：

我有适用于表格的指令。它假设在这个表单中获取所有组件 MyFormWrapper，并且在表单 submit() 上应该为每个组件调用方法 activate()。由于指令没有视图，我不能使用@ViewChildren 和@ContentChildren。

我的计划是扫描 DOM 树并获取 <my-form-element> 的 ElementRefs。那部分很容易。我现在缺少的是如何将 ElementRef 转换为 MyFormWrapper 组件实例。知道如何解决这个问题吗？

【问题讨论】：

标签： angular components directive

【解决方案1】：

我认为您想将 ElementRef 升级为 ComponentRef。

我认为这段代码是你需要的：

// 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;

【讨论】：

问题是我在导航 DOM，所以我必须从 ElementRef 开始。也许有办法导航 Angular ComponentRef 层次结构，但我不确定如何。
我认为您也可以使用 ElementRef 的 ComponentFactory 创建一个 ComponentRef。我从未尝试过，但如果没有其他帮助您，您可以尝试一下。