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

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

  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:
Подход, предложенный Андреем Грековым


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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

  • @ViewChild
  • @ViewChildren
13 февраля 2019 г. в Angular

@Attribute() декоратор

Аналогично @Input() позволяет получить значение атрибута с хоста компонента/директивы, но не отслеживает дальнейшее изменение атрибута.

15 сентября 2019 г. в Angular

TS. Event bus

Создаётся providedIn: 'root' сервис событий. Затем отправляются события на шину, и если какой-либо слушатель подписан на эти события, он получает уведомления.