将Bootstrap模板集成到Angular应用时select('#header')返回null的问题

我正尝试将Bootstrap模板集成到Angular应用中，但遇到了滚动行为异常的问题。在Bootstrap模板的main.js文件中，有一个根据滚动状态为header元素添加header-scrolled类的函数，该函数在独立模板中运行正常，但在Angular应用中调用select('#header')时返回null，导致滚动功能失效。

已执行的集成步骤 #

• 将模板的assets目录复制到Angular应用src目录下的assets文件夹中。
• 在angular.json的scripts数组中添加main.js文件的路径。

问题代码片段（main.js） #

const select = (el, all = false) => {
  el = el.trim();
  if (all) {
    return [...document.querySelectorAll(el)];
  } else {
    return document.querySelector(el);
  }

  let selectHeader = select('#header');
  if (selectHeader) {
    const headerScrolled = () => {
      if (window.scrollY > 100) {
        selectHeader.classList.add('header-scrolled');
      } else {
        selectHeader.classList.remove('header-scrolled');
      }
    };
    window.addEventListener('load', headerScrolled);
    onscroll(document, headerScrolled);
  }
};

我怀疑该问题与Angular应用的组件生命周期或select('#header')的调用时机有关。请问为何在Angular应用中select('#header')会返回null？需要做出哪些特定调整才能让该函数在Angular中正常工作？

为什么select('#header')返回null？ #

1. 执行时机过早：在angular.json中引入的main.js会在Angular组件渲染前就执行，此时#header元素还未被Angular渲染到DOM中，自然无法查询到。
2. 代码逻辑错误：原select函数中，return语句之后的代码永远不会执行——let selectHeader = select('#header');这段逻辑被放在了return后面，不管在什么环境下，滚动监听的代码都不会被触发。

修复步骤 #

步骤1：修正main.js的代码逻辑 #

先把滚动监听的代码从select函数内移出，避免被return语句阻断：

const select = (el, all = false) => {
  el = el.trim();
  if (all) {
    return [...document.querySelectorAll(el)];
  } else {
    return document.querySelector(el);
  }
};

// 将滚动监听逻辑移到函数外部
let selectHeader = select('#header');
if (selectHeader) {
  const headerScrolled = () => {
    if (window.scrollY > 100) {
      selectHeader.classList.add('header-scrolled');
    } else {
      selectHeader.classList.remove('header-scrolled');
    }
  };
  window.addEventListener('load', headerScrolled);
  document.addEventListener('scroll', headerScrolled);
}

步骤2：确保在Angular组件渲染后执行代码 #

直接在angular.json中引入main.js会导致代码执行过早，推荐两种解决方式：

方式一：在根组件的ngAfterViewInit钩子中调用

把滚动监听逻辑封装成独立函数，在根组件视图渲染完成后执行：

1. 修改main.js：

const select = (el, all = false) => {
  el = el.trim();
  if (all) {
    return [...document.querySelectorAll(el)];
  } else {
    return document.querySelector(el);
  }
};

// 封装成全局函数
window.initHeaderScroll = () => {
  let selectHeader = select('#header');
  if (selectHeader) {
    const headerScrolled = () => {
      if (window.scrollY > 100) {
        selectHeader.classList.add('header-scrolled');
      } else {
        selectHeader.classList.remove('header-scrolled');
      }
    };
    // 初始化时先执行一次，避免初始状态异常
    headerScrolled();
    window.addEventListener('scroll', headerScrolled);
  }
};

2. 在根组件app.component.ts中调用：

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

declare function initHeaderScroll(): void;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 组件视图渲染完成后执行
    initHeaderScroll();
  }
}

方式二：使用Angular原生API实现（推荐）

完全脱离外部JS文件，用Angular的Renderer2和生命周期钩子实现，更符合Angular组件化思想：

import { Component, AfterViewInit, ElementRef, Renderer2, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  private headerElement: HTMLElement;

  constructor(private elRef: ElementRef, private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    this.headerElement = this.elRef.nativeElement.querySelector('#header');
    // 初始化状态
    this.updateHeaderScrollClass();
  }

  @HostListener('window:scroll')
  onWindowScroll(): void {
    this.updateHeaderScrollClass();
  }

  private updateHeaderScrollClass(): void {
    if (!this.headerElement) return;
    if (window.scrollY > 100) {
      this.renderer.addClass(this.headerElement, 'header-scrolled');
    } else {
      this.renderer.removeClass(this.headerElement, 'header-scrolled');
    }
  }
}

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