Angular初始化后执行JS函数：无jQuery初始化DKFDS的方法

我之前也碰到过类似第三方UI框架在Angular里初始化不生效的情况，咱们来一步步拆解解决：

为什么之前的方法都没用？ #

• index.html里的DOMContentLoaded：Angular应用本身是在这个事件触发后才启动渲染的，此时DKFDS需要初始化的组件（比如你的Overflow menu）还没被Angular渲染到DOM里，调用DKFDS.init()根本找不到目标元素，自然无效。
• ngOnInit：这个钩子是组件初始化但视图还没开始渲染时触发的，DOM元素都还不存在，肯定没法初始化DKFDS。
• ngAfterViewInit：虽然当前组件的视图渲染完成了，但Angular可能还有异步加载的内容、子组件的后续渲染，或者未完成的变更检测循环，导致DKFDS初始化时目标元素还没完全就绪。

而jQuery的$(...)能生效，本质是它把初始化逻辑放到了宏任务队列的末尾，刚好等Angular完成所有初始渲染后才执行，这时候DOM里的元素都齐全了。

纯Angular环境下的可行方案 #

我们可以用Angular自带的API实现类似的延迟初始化，确保在应用完全稳定、所有DOM元素都渲染完成后再调用DKFDS.init()：

方案1：利用ApplicationRef的isStable状态（最可靠）

这个方法会监听Angular应用的稳定状态，当应用没有任何待处理的变更检测和异步任务时，再执行初始化：

import { Component, AfterViewInit, ApplicationRef } from '@angular/core';
import { first } from 'rxjs/operators';
// 声明全局的DKFDS变量（如果框架是全局引入的）
declare var DKFDS: any;

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

  ngAfterViewInit(): void {
    // 等待应用第一次进入稳定状态
    this.appRef.isStable.pipe(
      first(isStable => isStable)
    ).subscribe(() => {
      // 此时所有初始DOM元素都已渲染完成
      DKFDS.init();
    });
  }
}

方案2：用setTimeout延迟初始化（简单快捷）

如果你的应用没有复杂的异步加载逻辑，用setTimeout把初始化逻辑放到下一个宏任务，也能避开Angular的初始渲染时机：

import { Component, AfterViewInit } from '@angular/core';
declare var DKFDS: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 0秒延迟会把任务放到宏任务队列末尾
    setTimeout(() => {
      DKFDS.init();
    }, 0);
  }
}

额外提示 #

如果你的应用中有动态加载的组件（比如路由懒加载、条件渲染的组件），那每次动态添加DKFDS元素后，都需要重新调用DKFDS.init()来初始化新元素。这时候可以把初始化逻辑封装成一个服务，在需要的地方调用。

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