当使用Angular的路由改变页面时，可能会发现外部JavaScript无法工作。这是因为当路由改变时，只有路由组件会被重新渲染，不会重新加载整个页面，从而使旧的JavaScript代码仍然留在DOM中。为了解决这个问题，可以使用Angular的路由导航事件来重新加载JavaScript文件。

示例代码如下：

1. 在index.html文件中，为JavaScript文件添加唯一的ID：

2. 在组件中添加以下代码：

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

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

constructor(private router: Router) { }

ngOnInit() { this.router.events .pipe(filter(event => event instanceof NavigationEnd)) .subscribe(event => { const externalScript = document.getElementById('externalScript'); if (externalScript) { externalScript.parentNode.removeChild(externalScript); } const script = document.createElement('script'); script.id = 'externalScript'; script.type = 'text/javascript'; script.src = 'externalScript.js'; document.body.appendChild(script); }); } }

在这个示例中，我们订阅了路由的NavigationEnd事件，并通过document.getElementById()方法检查页面中是否存在带有特定ID的JavaScript文件。如果存在，则从DOM中删除该文件，然后通过document.createElement()方法重新创建，然后将其附加到页面的中。

这将确保在Angular路由更改时，外部JavaScript文件能够按预期工作。