Angular 2+中如何在子组件获取AppComponent内div的ElementRef引用

@ViewChild 只会查找当前组件自身模板内定义的元素和模板变量，你写的#topContainerRef是定义在AppComponent的模板里的，不属于CustomerComponent的模板作用域，所以在CustomerComponent里直接用@ViewChild查找永远会返回undefined。

优先推荐共享服务方案，符合Angular设计规范，耦合度低：

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

• 第一步：创建全局共享的布局服务，用来存储顶层容器的引用

// layout.service.ts 路径按你项目实际结构调整
import { Injectable, ElementRef } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LayoutService {
  private topContainerRefSub = new BehaviorSubject<ElementRef | null>(null);
  // 对外暴露可订阅的引用流
  public topContainerRef$ = this.topContainerRefSub.asObservable();

  // 提供方法让AppComponent传入容器引用
  setTopContainer(ref: ElementRef) {
    this.topContainerRefSub.next(ref);
  }
}

• 第二步：在AppComponent中获取自身模板的容器引用，初始化完成后传给服务

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('topContainerRef', { static: false }) topContainerRef!: ElementRef;

  constructor(private layoutService: LayoutService) {}

  ngAfterViewInit() {
    // 视图初始化完成后，把引用传给服务
    this.layoutService.setTopContainer(this.topContainerRef);
  }
}

• 第三步：在CustomerComponent中从服务获取引用，操作滚动

// customer.component.ts
import { Component, OnDestroy } from '@angular/core';
import { LayoutService } from '../layout.service';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html'
})
export class CustomerComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
  private topContainer: HTMLElement | null = null;

  constructor(private layoutService: LayoutService) {
    // 订阅服务里的容器引用
    this.layoutService.topContainerRef$
      .pipe(takeUntil(this.destroy$))
      .subscribe(ref => {
        if (ref) {
          this.topContainer = ref.nativeElement;
          // 拿到引用后就可以直接操作滚动
          // 示例：设置滚动高度为200
          // this.topContainer.scrollTop = 200;
        }
      });
  }

  // 示例：封装滚动方法
  setScrollTop(value: number) {
    if (this.topContainer) {
      this.topContainer.scrollTop = value;
    }
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.destroy$.next();
    this.destroy$.complete();
  }
}

方案2：直接注入父组件实例（不推荐） #

如果不想额外创建服务，可以直接在CustomerComponent中注入AppComponent实例，直接访问实例上的topContainerRef属性：

// customer.component.ts
import { Component, Optional, AfterViewInit } from '@angular/core';
import { AppComponent } from '../../app.component';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html'
})
export class CustomerComponent implements AfterViewInit {
  constructor(@Optional() private appComp: AppComponent) {}

  ngAfterViewInit() {
    // 加setTimeout避开视图初始化的时序问题
    setTimeout(() => {
      if (this.appComp?.topContainerRef) {
        this.appComp.topContainerRef.nativeElement.scrollTop = 200;
      }
    }, 0);
  }
}

注意：这个方案耦合度极高，CustomerComponent只能在AppComponent作为直接父宿主的场景下使用，如果后续调整路由结构、把CustomerComponent放到其他路由出口下，代码会直接失效。

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