Angular中如何通过类接口获取根级父组件而非直接父组件？

你当前的实现中，每个父组件都会重新提供Parent令牌，导致嵌套子组件注入时只会拿到最近的父组件实例。要让嵌套子组件获取根级的Parent实例，可以用以下两种方案：

方案一：新增根级父组件专属注入令牌 #

这种方式逻辑清晰，通过单独的令牌明确指定要注入根级实例：

1. 定义根级父组件的注入令牌

import { InjectionToken } from '@angular/core';
import { Parent } from './parent';

export const ROOT_PARENT = new InjectionToken<Parent>('Root Parent');

2. 在根组件（如AliceComponent）中同时提供Parent和ROOT_PARENT

import { Component, forwardRef } from '@angular/core';
import { Parent } from './parent';
import { ROOT_PARENT } from './root-parent.token';

@Component({
  selector: 'app-alice',
  template: '<app-alex></app-alex>',
  providers: [
    { provide: Parent, useExisting: forwardRef(() => AliceComponent) },
    { provide: ROOT_PARENT, useExisting: Parent }
  ]
})
export class AliceComponent extends Parent {
  // 根组件业务逻辑
}

3. 在嵌套子组件（如ChrisComponent）中注入ROOT_PARENT

import { Component, Optional, Inject } from '@angular/core';
import { ROOT_PARENT } from './root-parent.token';
import { Parent } from './parent';

@Component({
  selector: 'app-chris',
  template: '{{ rootParent?.name }}'
})
export class ChrisComponent {
  constructor(
    @Optional() @Inject(ROOT_PARENT) public rootParent?: Parent
  ) {}
}

方案二：通过注入器遍历查找顶层实例 #

如果不想新增令牌，可以手动遍历注入器链，找到最顶层的Parent实例：

import { Component, Injector } from '@angular/core';
import { Parent } from './parent';

@Component({
  selector: 'app-chris',
  template: '{{ rootParent?.name }}'
})
export class ChrisComponent {
  public rootParent?: Parent;

  constructor(private injector: Injector) {
    let currentInjector = this.injector;
    let topParent: Parent | null = null;

    while (currentInjector) {
      const parentInstance = currentInjector.get(Parent, null, { optional: true });
      if (parentInstance) {
        topParent = parentInstance;
      }
      currentInjector = currentInjector.parent;
    }

    this.rootParent = topParent;
  }
}

这种方法会遍历所有上层注入器，记录最后找到的Parent实例（即根级实例）。

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