时间戳

首页 > 解决方案 > 从 DOM 元素中获取 Angular 组件类

angular - 从 DOM 元素中获取 Angular 组件类

问题描述

我相信对此的答案是“否”，但是 Angular 中是否有一种方法/服务可以让我传入组件的根 DOM 节点（例如<foo-component>）并接收组件实例（例如FooComponent）？

我找不到与此相关的 SO 帖子。

例子：

<foo-component id="foo"></foo-component>

const fooElement: HTMLElement = document.getElementById('foo');
const fooInstance: FooComponent = getInstanceFromElement(fooElement);

Angular中有没有类似的方法getInstanceFromElement？

编辑：

我不能使用ViewChild...我正在寻找我可以使用的全球服务。假设我没有从组件类调用此方法。我很熟悉ViewChild/ContentChild他们不是我要找的。假设我在一个全局注入服务中，并且正在尝试执行以下操作：

class MyService {
  constructor() {}

  getInstanceFromElement(element: HTMLElement): Component<T> {
    // Is there some special helper service I can use here?
  }
}

标签： angular

解决方案

试试这样：

工作演示

模板：

<foo-component #foo></foo-component>

TS：

  @ViewChild('foo', { static: false }) fooComponent: FooComponent;

  ngAfterViewInit() {
    console.log(this.fooComponent)
  }

推荐阅读