Angular2：路由切换时如何运行jQuery初始化脚本？

哈哈，这个问题我太熟了！第三方脚本依赖$(document).ready()的话，在Angular这种单页应用里肯定会踩坑——因为路由切换根本不会触发页面刷新，ready事件只在首次加载时跑一次。给你几个实用的解决思路，亲测有效：

Angular的Router会发出各种路由事件，我们可以监听NavigationEnd（路由切换完成的事件），每次路由走完就调用第三方的初始化逻辑。

假设第三方脚本里负责显示元素和调高度的函数叫initTargetElement()（你可以从第三方代码里找到这个函数名），在根组件（比如app.component.ts）里这么写：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  // 过滤出路由完成的事件
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 确保第三方函数已加载再调用
    if (typeof window.initTargetElement === 'function') {
      window.initTargetElement();
    }
  });
}

这样不管你切换到哪个路由，只要页面渲染完成，就会重新执行一次初始化，元素自然就能正常显示了。

如果找不到第三方的具体函数名，或者不想依赖它的全局函数，那就自己手动实现显示和调高度的逻辑。

比如你的目标元素有个模板引用#myTargetElement，在组件里这么处理：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { ElementRef, ViewChild, AfterViewInit } from '@angular/core';

export class YourComponent implements AfterViewInit {
  @ViewChild('myTargetElement') targetEl: ElementRef;

  constructor(private router: Router) {}

  ngAfterViewInit() {
    this.setupElementOnRouteChange();
  }

  private setupElementOnRouteChange() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const el = this.targetEl.nativeElement;
      if (!el) return;

      // 手动设置显示（模仿第三方的逻辑）
      el.style.display = 'block'; 
      // 手动计算并设置高度，比如取内容的滚动高度
      el.style.height = `${el.scrollHeight}px`;
      // 如果第三方还有其他逻辑，比如绑定事件，也可以在这里模拟
    });
  }
}

这个方法的好处是不依赖第三方脚本的内部实现，稳定性更高。

把第三方初始化逻辑封装成一个Angular服务，这样在任何组件、守卫里都能方便调用：

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

@Injectable({ providedIn: 'root' })
export class ThirdPartyInitService {
  initTargetElement() {
    // 这里可以直接复制第三方$(document).ready()里的代码，或者调用全局函数
    if (window.initTargetElement) {
      window.initTargetElement();
    }
  }
}

然后在根组件注入这个服务，监听路由事件调用，或者在特定组件的ngAfterViewInit里调用，灵活度很高。

• 一定要确保在DOM元素渲染完成后再调用初始化逻辑，NavigationEnd事件和ngAfterViewInit钩子都是安全的时机；
• 如果第三方脚本是动态加载的，要先判断函数是否存在再调用，避免报错；
• 如果是复用的组件，记得在ngOnDestroy里取消路由事件的订阅，防止内存泄漏。

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