Question

因此，我创建了一个script.service.ts文件，该文件在需要项目时将JavaScript文件注入到不同的组件中。但是，当我只在index.html文件中包含脚本链接时，仍然遇到我创建之前的问题。这个问题是说您加载了一个名为“ localhost：4200 / user”的页面，该页面使用了一个组件，该组件使用外部JavaScript文件来激活用户网络摄像头。例如，一切正常，但是如果您加载，请说“ localhost：4200 / login”，然后单击将您路由到“ localhost：4200 / user”的按钮，相机功能将无法使用。我仅以此功能为例。

但是主要问题是，如果您首先加载一个组件，然后从外部文件路由到具有Java脚本功能的组件，则除非您在该组件上启动，否则该功能将无法工作。那么，如何在更改路线时强制angular重新为外部JavaScript文件重新加载功能？

我正在使用最新版本的Angular。谢谢您的提前帮助！

Answer 1

不是将脚本加载到angular-cli.json中，而是将app.component.ts更改为：

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

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

    }

    ngOnInit() {
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                if (document.getElementById('custom_js') !=null) {
                    document.getElementById('custom_js').remove();
                }
                const node = document.createElement('script');
                node.src = 'assets/js/custom_scripts.js';
                node.type = 'text/javascript';
                node.async = false;
                node.id = 'custom_js';
                node.charset = 'utf-8';
                document.getElementsByTagName('head')[0].appendChild(node);
            }
        });
    }
}

这将在每次路由后重新插入js文件。无需在每个组件中加载脚本。这将神奇！！！

组件更改后，带有外部JavaScript的Angular无法运行

1 个答案: