Angular 12中router-outlet加载的组件如何获取父级DOM容器引用

Angular 中模板引用变量默认仅在当前组件模板内生效，路由加载的子组件无法直接访问父布局的模板引用，可通过以下两种方案实现需求：

方案1：共享服务传递引用（推荐） #

该方案耦合度低，支持所有层级组件访问，适配响应式场景。

步骤1：创建共享存储服务 #

创建LayoutService存储两个DOM元素的引用：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LayoutService {
  // 存储两个元素的可观察对象，初始值为null
  private readonly layoutContainer$ = new BehaviorSubject<HTMLElement | null>(null);
  private readonly contentBody$ = new BehaviorSubject<HTMLElement | null>(null);

  // 更新元素引用
  setLayoutContainer(el: HTMLElement | null): void {
    this.layoutContainer$.next(el);
  }

  setContentBody(el: HTMLElement | null): void {
    this.contentBody$.next(el);
  }

  // 对外暴露可观察对象供组件订阅
  getLayoutContainer() {
    return this.layoutContainer$.asObservable();
  }

  getContentBody() {
    return this.contentBody$.asObservable();
  }
}

步骤2：父布局组件注入服务并传递引用 #

在主布局组件中通过@ViewChild获取模板引用，渲染完成后传入服务：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { LayoutService } from './services/layout.service';

@Component({
  // 你的主布局组件配置
})
export class LayoutComponent implements AfterViewInit {
  // 获取模板引用对应的元素
  @ViewChild('layoutContainer') layoutContainer!: ElementRef<HTMLElement>;
  @ViewChild('layoutContainerContentBody') contentBody!: ElementRef<HTMLElement>;

  constructor(private layoutService: LayoutService) {}

  ngAfterViewInit(): void {
    // 元素渲染完成后更新服务中的引用
    this.layoutService.setLayoutContainer(this.layoutContainer.nativeElement);
    this.layoutService.setContentBody(this.contentBody.nativeElement);
  }
}

步骤3：子组件订阅获取引用 #

任意路由加载的子组件注入服务后，订阅即可拿到对应的元素：

import { Component, OnInit } from '@angular/core';
import { LayoutService } from '../services/layout.service';

@Component({
  // 你的子组件配置
})
export class YourRouteComponent implements OnInit {
  constructor(private layoutService: LayoutService) {}

  ngOnInit(): void {
    // 订阅获取布局容器引用
    this.layoutService.getLayoutContainer().subscribe(el => {
      if (el) {
        // 这里写你需要操作元素的逻辑
        console.log('布局容器元素：', el);
      }
    });

    // 订阅获取内容容器引用
    this.layoutService.getContentBody().subscribe(el => {
      if (el) {
        // 这里写你需要操作元素的逻辑
        console.log('内容容器元素：', el);
      }
    });
  }
}

方案2：通过router-outlet激活事件传递 #

该方案适合简单场景，无需额外创建服务，耦合度相对更高。

步骤1：主布局模板给router-outlet加激活事件 #

修改你的主布局模板代码：

<div #layoutContainerContentBody class="layout__container__content-body">
  <router-outlet (activate)="onComponentActivate($event)"></router-outlet>
</div>

步骤2：主布局组件实现事件方法 #

在主布局组件中给激活的子组件实例直接赋值元素引用：

// 前置和方案1一致，需要先通过@ViewChild拿到两个元素的引用
onComponentActivate(activeComponent: any): void {
  activeComponent.layoutContainer = this.layoutContainer.nativeElement;
  activeComponent.contentBody = this.contentBody.nativeElement;
}

步骤3：子组件声明对应属性即可使用 #

export class YourRouteComponent {
  // 声明和父组件赋值对应的属性
  layoutContainer!: HTMLElement;
  contentBody!: HTMLElement;

  // 组件激活后即可直接使用这两个属性
  ngAfterViewInit(): void {
    console.log(this.layoutContainer, this.contentBody);
  }
}

注意事项 #

• 不要在ngOnInit生命周期中直接访问DOM元素引用，此时元素还未完成渲染，会返回空值。
• 开启TypeScript严格模式时，建议对元素引用增加非空判断，避免运行时报错。

内容的提问来源于stack exchange，提问作者Aldemar Cuartas Carvajal