Angular с External JavaScript не запускается после изменения компонента

Question

Итак, я создал файл script.service.ts, в который я вставляю свои файлы JavaScript в разные компоненты, когда это необходимо для моего проекта.Однако я все еще сталкиваюсь с проблемой, которая возникла до того, как я создал ее, когда просто включил ссылки на скрипты в файл index.html.Эта проблема заключается в том, что вы, например, загружаете страницу, называемую «localhost: 4200 / user», и которая использует компонент, использующий внешний файл JavaScript, например, для активации веб-камеры пользователя.localhost: 4200 / login ", а затем нажмите кнопку, которая перенаправит вас на" localhost: 4200 / user ", функция камеры не будет работать. Я просто использую эту функцию в качестве примера.

НоОсновная проблема заключается в том, что если сначала загрузить один компонент, а затем направить его к компоненту, обладающему функциональностью java-скрипта, из внешнего файла, то эта функциональность не будет работать, если вы не запустите этот компонент.изменить?

Я использую последнюю версию 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 после каждой маршрутизации.Не нужно загружать скрипт в каждый компонент.Это сделает волшебство !!!