Angular 4路由切换后脚本失效；Angular 5首页JS/JQuery未加载

嘿，这个问题我太熟悉了——Angular作为单页应用（SPA），路由切换的时候并不会重新加载整个页面，所以你写的那些JavaScript或jQuery代码，只会在首次打开首页的时候执行一次，等你切换路由再回来，自然就没反应了。下面给你几个实用的解决方案，从符合Angular最佳实践的到应急的都有：

这是最贴合Angular设计思想的方法，通过监听路由的NavigationEnd事件，判断是否回到了首页，然后重新执行你的脚本逻辑。

• 在你的首页组件（比如HomeComponent）中注入Router，然后添加监听逻辑：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    // 监听路由导航完成事件，只在回到首页时触发脚本
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 根据你的实际首页路由调整判断条件，比如 '/' 或者 '/home'
      if (event.url === '/' || event.url.includes('/home')) {
        this.initPageScripts();
      }
    });

    // 首次加载首页时也要执行一次
    this.initPageScripts();
  }

  private initPageScripts(): void {
    // 把你原来的JS/jQuery代码放到这里
    // 举个例子：初始化jQuery轮播
    // $('.home-carousel').carousel({ interval: 3000 });
    // 或者原生JS逻辑：
    const targetElement = document.getElementById('home-banner');
    if (targetElement) {
      targetElement.classList.add('fade-in');
    }
  }
}

注意：如果使用jQuery，要确保已经在项目中正确引入（比如在angular.json的scripts数组里添加jQuery的文件路径或CDN链接）。

如果你的脚本依赖DOM元素的渲染状态，可以用ngAfterViewChecked钩子——它会在每次视图更新后触发，包括路由切换回来的时候。

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, AfterViewChecked {
  // 标记脚本是否已经执行，避免重复触发
  private isScriptsInited = false;

  constructor(private router: Router) {}

  ngOnInit(): void {}

  ngAfterViewChecked(): void {
    const isHomeRoute = this.router.url === '/' || this.router.url.includes('/home');
    
    // 只有在首页且脚本未执行时，才初始化
    if (isHomeRoute && !this.isScriptsInited) {
      this.initPageScripts();
      this.isScriptsInited = true;
    } 
    // 离开首页时重置标记，下次回来重新执行
    else if (!isHomeRoute) {
      this.isScriptsInited = false;
    }
  }

  private initPageScripts(): void {
    // 你的脚本逻辑
  }
}

如果你的项目里大量使用jQuery，不想立刻重构代码，可以把事件绑定改成事件委托——把事件绑定到不会被路由销毁的父级元素（比如body或者组件的根容器），这样即使DOM元素是路由切换后重新渲染的，事件依然能触发。

比如原来的代码是：

$('.home-btn').click(function() {
  // 你的点击逻辑
});

改成事件委托形式：

// 绑定到body，监听子元素的点击事件
$('body').on('click', '.home-btn', function() {
  // 你的点击逻辑
});

提醒：这个方法虽然快捷，但不符合Angular的最佳实践，长期维护建议还是往组件/指令方向重构。

• 别再用$(document).ready()了！它只会在页面首次加载时触发一次，路由切换时完全无效，Angular的生命周期钩子已经能完美处理DOM渲染时机。
• 如果是第三方库（比如图表、轮播），最好封装成Angular指令或组件，这样能更好地和Angular的生命周期联动，避免各种奇怪的问题。

内容的提问来源于stack exchange，提问作者Sr.Nitish