Angular 6 - Добавление скрипта на уровне компонента и проверка, существует ли он - PullRequest
Новая
       47

Angular 6 - Добавление скрипта на уровне компонента и проверка, существует ли он

2 голосов
/ 20 марта 2019

У меня есть скрипт, который я хотел бы запустить только на одном компоненте.Мне удалось добиться добавления сценария к компоненту, но произошло несколько вещей, которые я не совсем уверен, как решить.

  1. Если я перейду к компоненту, сценарий будет добавлен вДОМ, но это не стрельба.Если я обновлю страницу, она будет работать
  2. . Если я перейду к другому компоненту и вернусь, сценарий будет добавлен снова, и он может продолжать наращивать компонент

.тс 

import { Component, OnInit } from '@angular/core';
import { Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({
  selector: 'app-privacy',
  templateUrl: './privacy.component.html',
  styles: []
})
export class PrivacyComponent implements OnInit {

  constructor(private _renderer2: Renderer2, @Inject(DOCUMENT) private _document) {
    let s = this._renderer2.createElement('script');
    s.type = `text/javascript`;
    s.src = `../../assets/scripts/privacy.js`;

    this._renderer2.appendChild(this._document.body, s);
   }

  ngOnInit() {
  }

}

Ответы [ 2 ]

0 голосов
/ 20 марта 2019

Вам необходимо добавить обработчик onload (если вам нужна поддержка IE, убедитесь, что он также поддерживает onreadystatechange) к вашему элементу скрипта, который может вызывать функцию, которую вы хотите выполнить, когда скрипт завершит загрузку.

Чтобы удалить сценарий onNgDestroy, сохраните ссылку createElement? на Компоненте и удалите ее в ловушке уничтожения жизненного цикла. 

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({
  selector: 'app-privacy',
  templateUrl: './privacy.component.html',
  styles: []
})
export class PrivacyComponent implements OnInit, OnDestroy {
  private s: any;
  constructor(private _renderer2: Renderer2, @Inject(DOCUMENT) private _document) {
    this.s = this._renderer2.createElement('script');
    this.s.type = `text/javascript`;
    this.s.src = `../../assets/scripts/privacy.js`;
    this.s.onload = this.doneLoading;

    this._renderer2.appendChild(this._document.body, this.s);
  }

  doneLoading () {
    // do what you need to do
  }


  ngOnDestroy() {
    // this removes the script so it won't be added again when the component gets initialized again.
    this._renderer2.removeChild(this._document.body, this.s)
  }

  ngOnInit() {
  }

}
0 голосов
/ 20 марта 2019

Ваш подход к запуску этого js-файла неправильный, для достижения этого вам необходимо выполнить следующее:

  1. Добавить свой js-файл в ресурсы (например, assets / js / privacy).js)
  2. Добавление файла в сценарии .angular-cli.json
  3. Теперь вы можете вызывать свои функции js из угловых компонентов, если вы объявите их в компоненте

angular-cli.json 

"scripts": [
  "assets/js/privacy.js"
]

component.ts 

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

declare function myFunc(): any; // function from privacy.js 

@Component({
  selector: 'app-privacy',
  templateUrl: './privacy.component.html',
  styles: []
})
export class PrivacyComponent implements OnInit {

  constructor() {
   }

  ngOnInit() {
      myFunc(); // call it
  }

}
...