这个问题我之前也碰到过，Angular作为单页应用（SPA）的特性就是：初始加载完index.html后，路由切换只会替换页面中的组件内容，不会重新刷新整个页面。所以你在index.html里通过<script>标签引入的脚本，只会在首次页面加载时执行一次，后续路由切换后新渲染的DOM元素自然就没被脚本处理到，导致功能失效。

下面给你几个针对性的解决办法，你可以根据自己的需求选择：

方法一：在组件生命周期钩子中动态加载脚本（适合特定组件使用的脚本） #

如果你的脚本只在某个或某几个组件中用到，可以在组件的ngOnInit或ngAfterViewInit钩子中动态创建<script>标签加载脚本，这样每次组件渲染时都会确保脚本被加载并初始化。

示例代码：

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

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.css']
})
export class TargetComponentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    // 加载自定义脚本，路径根据你的实际文件位置调整
    this.loadCustomScript('assets/your-script.js');
  }

  private loadCustomScript(url: string): void {
    // 先检查脚本是否已经加载过，避免重复加载
    if (!document.querySelector(`script[src="${url}"]`)) {
      const script = document.createElement('script');
      script.src = url;
      script.type = 'text/javascript';
      script.async = false; // 如果脚本有依赖，设置为false保证执行顺序

      // 脚本加载完成后，可以手动调用初始化函数（如果脚本需要的话）
      script.onload = () => {
        console.log('自定义脚本加载完成');
        // 比如你的脚本有初始化函数，就这里调用：window.yourScriptInit()
      };

      document.body.appendChild(script);
    }
  }
}

如果多个组件都需要用到这个脚本，建议把加载逻辑封装成一个服务，这样可以统一管理，避免重复代码。

方法二：通过Angular CLI配置全局脚本（适合全局通用的脚本） #

如果你的脚本是全局都要用的工具类（比如jQuery），可以直接在Angular的配置文件里添加，让CLI把脚本打包到全局资源中，这样只会加载一次，全局都能访问。

1. 找到项目根目录下的.angular-cli.json（Angular 5用的是这个，新版本是angular.json）
2. 在apps[0].scripts数组中添加你的脚本路径：

{
  "apps": [
    {
      "scripts": [
        // 其他全局脚本
        "assets/your-global-script.js"
      ]
    }
  ]
}

配置完成后重启开发服务器，脚本就会全局可用了。但要注意：如果脚本是依赖DOM元素初始化的，还是需要在组件的生命周期钩子中手动调用脚本的初始化方法，因为路由切换后DOM更新了，脚本不会自动重新执行。

方法三：用Angular指令替代原生脚本的DOM操作（推荐长期方案） #

如果你的脚本主要是做DOM事件绑定、样式修改这类操作，更推荐用Angular的指令来实现，这样更符合Angular的开发规范，也能避免SPA路由带来的问题。

比如原来脚本是给按钮绑定点击事件，我们可以写一个自定义指令：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appCustomButton]' // 自定义指令的选择器
})
export class CustomButtonDirective {

  constructor(private el: ElementRef) { }

  // 监听按钮的点击事件
  @HostListener('click') onButtonClick() {
    // 这里写原来脚本里的点击逻辑
    console.log('自定义按钮被点击了');
    // 如果需要调用脚本里的全局函数，也可以这样：
    if (window['customButtonHandler']) {
      window['customButtonHandler'](this.el.nativeElement);
    }
  }
}

然后在组件模板中使用这个指令：

<button appCustomButton>点击我</button>

这样不管路由怎么切换，只要带有这个指令的元素被渲染出来，事件绑定就会自动生效。

额外注意事项 #

如果你的脚本会给window对象添加全局方法或属性，TypeScript可能会报错，你可以在项目的typings.d.ts文件中添加类型声明：

declare interface Window {
  yourCustomFunction: () => void;
  // 其他全局属性或方法
}

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