Angular 2+中如何通过DOM访问父组件的方法与变量？

首先得说清楚：Angular的设计初衷是让组件通过数据绑定、服务、依赖注入这些规范方式通信，直接绕开框架通过DOM操作上层组件实例，其实是违背它的封装原则的——但考虑到你是动态生成组件的场景，确实有几种可行的路子，我给你拆解下：

1. 用依赖注入+ViewContainerRef（最推荐，符合Angular范式） #

如果你的组件是动态创建的，完全可以在创建过程中把上层组件的实例注入到子组件里，或者通过ViewContainerRef拿到父级组件的实例。

举个例子，假设你在父组件里动态生成子组件：

import { Component, ViewContainerRef, ComponentFactoryResolver, Injector } from '@angular/core';
import { HelloComponent } from './hello.component';
import { SomeOtherComponent } from './some-other.component';

@Component({
  selector: 'some-other-component',
  template: '<div #componentContainer></div>'
})
export class SomeOtherComponent {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container: ViewContainerRef;
  name = 'parent1';

  constructor(private cfr: ComponentFactoryResolver, private injector: Injector) {}

  ngAfterViewInit() {
    // 从当前容器的注入器里拿到上层的Hello组件实例
    const grandparentComp = this.container.injector.get(HelloComponent);
    // 直接调用方法、访问变量
    console.log('Grandparent name:', grandparentComp.name);
    grandparentComp.someMethod();

    // 如果要动态创建子组件，还能把父组件实例传给它
    const childFactory = this.cfr.resolveComponentFactory(HelloComponent);
    const childInjector = Injector.create({
      providers: [{ provide: SomeOtherComponent, useValue: this }]
    });
    const childComp = this.container.createComponent(childFactory, 0, childInjector);
    childComp.instance.name = 'grandchild1';
  }

  parentMethod() {
    console.log('Parent component method triggered!');
  }
}

然后在子组件里，通过构造函数注入就能拿到父级实例：

import { Component, Input, Optional } from '@angular/core';
import { SomeOtherComponent } from './some-other.component';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`
})
export class HelloComponent {
  @Input() name: string;

  // 用@Optional避免没有父组件时报错
  constructor(@Optional() private parentComp: SomeOtherComponent, @Optional() private grandparentComp: HelloComponent) {
    if (parentComp) {
      console.log('Parent name from DI:', parentComp.name);
    }
  }

  someMethod() {
    console.log('Grandparent method called!');
  }
}

2. 模板变量+@Input（适合静态/半动态模板） #

如果你的组件结构不是完全动态生成的，只是部分组件可变，可以给上层组件加个模板变量，然后通过@Input把实例传给子组件：

<hello #grandparent name="grandparent1">
  <some-other-component #parent name="parent1">
    <div>
      <hello name="grandchild1" [parentComponent]="parent"></hello>
      <hello name="grandchild2" [grandparentComponent]="grandparent"></hello>
    </div>
  </some-other-component>
</hello>

子组件里接收一下就能用：

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`
})
export class HelloComponent {
  @Input() name: string;
  @Input() parentComponent: SomeOtherComponent;
  @Input() grandparentComponent: HelloComponent;

  ngOnInit() {
    if (this.parentComponent) {
      this.parentComponent.parentMethod();
    }
  }
}

3. 直接操作DOM（不推荐，风险高） #

如果你真的要走DOM这条路，Angular会把组件实例存在DOM元素的__ngContext__属性里（不同版本索引可能变），你可以遍历DOM找到上层组件的元素，然后扒出实例：

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`
})
export class HelloComponent implements OnInit {
  @Input() name: string;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    // 向上遍历DOM，找some-other-component元素
    let parentEl = this.el.nativeElement.parentElement;
    while (parentEl && !parentEl.tagName.includes('SOME-OTHER-COMPONENT')) {
      parentEl = parentEl.parentElement;
    }

    if (parentEl) {
      // 注意：__ngContext__的索引在不同Angular版本可能不一样！
      const parentComp = parentEl.__ngContext__[1];
      console.log('Parent name from DOM:', parentComp.name);
      parentComp.parentMethod();
    }
  }
}

⚠️ 敲黑板：这种方法非常不稳定——Angular的内部实现一旦更新，__ngContext__的结构可能就变了，而且完全破坏了组件封装，后期维护起来会疯掉，生产环境千万别用！

最后总结 #

优先选方案1或2，它们是Angular官方认可的组件通信方式，代码健壮性和可维护性都高。只有在万不得已的极端场景下，才考虑方案3，而且要做好版本兼容的心理准备。

内容的提问来源于stack exchange，提问作者dindunuffin