The thought of accessing the component instance through the DOM Element has been keeping my head busy since Angular 4. When I researched again these days, I learned that this can be done.

自从Angular 4以来，通过DOM Element访问组件实例的想法一直困扰着我。当我最近进行研究时，我知道可以做到这一点。

A question was first asked about this problem 4 years ago on Reddit, but no solution other than @ViewChild was offered.

4年前在Reddit上首次提出了有关此问题的问题，但是除了@ViewChild之外没有其他解决方案。

However, with a commit made to the Angular Repo 8 months ago, the way to access the related component via the dom element was opened.

但是，随着8个月前对Angular Repo的提交 ，打开了通过dom元素访问相关组件的方式。

怎么做？ (How is it done?)

When any click event on the screen is listened to with @HostListener, if your target element has the variable ‘__ngContext__’, it means that you can access the component instance from within this information.

当使用@HostListener监听屏幕上的任何单击事件时，如果目标元素具有变量'__ngContext__'，则意味着您可以从此信息中访问组件实例。

@HostListener('click', ['$event.target'])clickAnyWhere(elem: any) {}

This means that within the ‘__ngContext__’ property, if index 0 is empty, it probably found “app-root”. If the 0th index is not empty, the 8th index will give us the component’s instance information.

这意味着在'__ngContext__'属性中，如果索引0为空，则可能找到“ app-root”。 如果第0个索引不为空，则第8个索引将为我们提供组件的实例信息。

findAngularComponent(element: any) {
    const MONKEY_PATCH_KEY_NAME = '__ngContext__';
    let comp;
    let process = true;
    while(process) {
      if(element[MONKEY_PATCH_KEY_NAME]){
        if(element[MONKEY_PATCH_KEY_NAME][0]) {
          comp = element[MONKEY_PATCH_KEY_NAME][8];
        } else {
          // app-root component
          comp = null;
        }
        process = false;
      } else {
        element = element.parentNode;
      }
    }
    return comp;
  }

I have written a small application that includes these explanations. As seen in the pictures above, there are 5 different components. Green, Red, Blue, Purple and Yellow Components. If you click on any component, you can access that component and change the information in it. Even when you click the “label” element in the red component, you can still access the component.

我已经编写了一个包含这些解释的小应用程序。 如上图所示，有5个不同的组件。 绿色，红色，蓝色，紫色和黄色组件。 如果单击任何组件，则可以访问该组件并更改其中的信息。 即使单击红色组件中的“标签”元素，您仍然可以访问该组件。

结果是 (As A Result)

By using this feature of Angular, you can dynamically select your components and make transactions through it. I think the following can be done using this feature.

通过使用Angular的此功能，您可以动态选择组件并通过它进行事务。 我认为使用此功能可以完成以下操作。

• Application Usage Guides can be prepared.
  可以准备应用程序使用指南。
• Security and Authorization Transactions can be dynamically managed without hard coded.
  安全和授权事务可以动态管理，而无需硬编码。

Demo Page : https://mcantonbul.github.io/Access-Component-Instance-Via-Dom/

演示页面 ： https : //mcantonbul.github.io/Access-Component-Instance-Via-Dom/

If you want to review the sample project,Github: https://github.com/mcantonbul/Access-Component-Instance-Via-Dom

如果您想查看示例项目，请访问Github： https : //github.com/mcantonbul/Access-Component-Instance-Via-Dom