Вставить <script> в Angular компонент

Опубликовано в Angular • 15 ноября 2019 г. • 1 мин. на чтение

Примитивный способ. Аналогичен нативной вставке скрипта в тело документа. 

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer2: Renderer2
  ) {}

  ngOnInit(): void {
    const textScript = this.renderer2.createElement('script');
    textScript.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js';
    this.renderer2.appendChild(this.document.body, textScript);

    const srcScript = this.renderer2.createElement('script');
    srcScript.type = 'text/javascript';
    srcScript.text = `
      (function() {
        console.log('Hello from Siberia!')
      }());
    `;
    this.renderer2.appendChild(this.document.body, srcScript);
  }

Чуть более навороченный способ: завернуть в обещание.

 ngOnInit() {
    this.loadScript('https://code.jquery.com/jquery-3.3.1.slim.min.js').then(
      () => this.loadTextScript(`
          setTimeout(() => {
            $( "#promise-based" ).html( "PromiseBasedComponent..." )
          }, 2000);
      `)
    );
  }

  loadTextScript(text: string) {
    return new Promise(resolve => {
      const script = this.renderer2.createElement('script');
      script.text = text;
      this.renderer2.appendChild(this.document.body, script);
      resolve();
    });
  }

  loadScript(url: string) {
    return new Promise((resolve, reject) => {
      const script = this.renderer2.createElement('script');
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      this.renderer2.appendChild(this.document.body, script);
    });
  }

Подход, предложенный Алексеем Зуевым: использование ReplaySubject в сервисе:

UPD 2020-08-09:
Подход, предложенный Андреем Грековым

Похожие записи