Angular8页面跳转后动态脚本内容不显示问题求助

Let's break down your problem and fix it step by step – this is a common pain point when mixing jQuery-based scripts with Angular's single-page routing!

Core Issue #

Angular is a single-page application framework, which means route navigations don't reload the entire page. The scripts you loaded in index.html (like scripts.min.js or script.js) only run once when the app first loads. When you navigate to a new route, Angular replaces the content inside <router-outlet> with the new component's DOM, but those jQuery-based plugins (parallax, lazyload) never get reinitialized for the new elements.

Also, from your view-source output, it looks like script.js is commented out – that's definitely a problem if it contains the initialization code for those dynamic features!

Step-by-Step Fixes #

1. Fix Script Loading First #

Stop loading scripts directly in index.html – use Angular's official way to manage external scripts via angular.json to avoid conflicts and ensure consistent loading:

• Open angular.json
• Find the build.options.scripts array under your project configuration
• Add your scripts here (order matters, since jQuery needs to load first):

  "scripts": [
    "src/assets/js/jquery-3.4.1.min.js",
    "src/assets/js/scripts.min.js",
    "src/assets/js/script.js"
  ]
  

• Remove the corresponding <script> tags from index.html – Angular will bundle these scripts properly now.

2. Reinitialize Plugins After Route Navigation #

Since plugins like parallax/lazyload rely on existing DOM elements, you need to re-run their initialization code after the new component's DOM is fully rendered. You have two solid options here:

Option A: Initialize in Each Component's ngAfterViewInit

For every component that uses parallax/lazyload (like MainPageComponent, CompanyPageComponent), implement the AfterViewInit hook:

import { Component, AfterViewInit } from '@angular/core';
// Declare jQuery to avoid TypeScript errors
declare var $: any;

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.css']
})
export class MainPageComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // Wait a tiny bit to ensure all DOM elements are ready
    setTimeout(() => {
      // Re-initialize parallax (adjust selector to match your elements)
      if ($.fn.parallax) {
        $('.parallax-section').parallax();
      }
      // Re-initialize lazyload
      if ($.fn.lazyload) {
        $('img.lazy').lazyload();
      }
      // If you have a global init function in script.js, call it directly
      // window.initDynamicFeatures();
    }, 100);
  }
}

Option B: Global Initialization via Router Events

If you don't want to repeat code in every component, listen for route navigation events in your AppComponent and reinitialize plugins once per navigation:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
declare var $: any;

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

  ngOnInit(): void {
    this.router.events.pipe(
      // Only trigger after the route navigation is fully done
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      setTimeout(() => {
        // Re-run all your dynamic script initializations here
        if ($.fn.parallax) $('.parallax-section').parallax();
        if ($.fn.lazyload) $('img.lazy').lazyload();
      }, 100);
    });
  }
}

3. Long-Term: Replace jQuery Plugins with Angular Alternatives #

To avoid this kind of issue entirely, consider swapping jQuery-based tools with Angular-native libraries:

• For lazy loading images: Use ngx-lazyload-image (a popular, Angular-specific library)
• For parallax effects: Look for Angular parallax components like ngx-parallax or build your own using Angular's HostListener and Renderer2

This will make your app more maintainable and align with Angular's best practices.

Quick Check #

Double-check that:

• script.js is not commented out in your source code (the view-source output showed it was commented – fix that if it's a mistake)
• All elements that need parallax/lazyload have the correct class names that your scripts target

内容的提问来源于stack exchange，提问作者Настоящий Иванович