Angular 5 - сценарий загрузки после загрузки представления
У меня есть устаревший скрипт, который мне нужно включить в мое угловое приложение. Особенность этого сценария в том, что он относится к определенному компоненту и должен быть загружен только после загрузки представления компонента. На сегодняшний день мне удалось включить его в функцию OnInit, но иногда (не всегда по какой-то причине) CLI выдает ошибку об этом.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-player-page',
templateUrl: './player-page.component.html',
styleUrls: ['./player-page.component.scss']
})
export class PlayerPageComponent implements OnInit {
public itemId: string;
constructor() {}
ngOnInit() {
//We loading the player srcript on after view is loaded
require('assets/scripts/player/player.js');
}
}Сценарий предполагает, что элементы в пользовательском интерфейсе существуют, и ищет их по идентификатору. При добавлении вверху страницы не работает. Как лучше всего добиться желаемого поведения?
Какую ошибку выдает клик? а на ngOnInit представление еще не отображается, вам следует использовать ngAfterViewInit. Вероятно, не имеет значения, потому что загрузка js должна занимать больше времени, чем приложение для перехода с onInit на afterViewInit.
ОШИБКА в src / app / player-page / player-page.component.ts (14,5): ошибка TS2304: не удается найти имя 'require'. @PierreDuc благодарит за помощь. Я изменил его на ngAfterViewInit
@Jorgeblom - Angular игнорирует теги скрипта в компонентах HTML, насколько мне известно
@TalHumy просто добавьте declare const require: any; поверх своего компонента, вы также можете использовать стандартный динамический импорт машинописного текста: import('assets/scripts/player/player.js');
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Есть несколько решений этой проблемы.
объявите константу
requireповерх вашего компонентаdeclare const require: any; import { Component, OnInit } from '@angular/core'; @Component({}) ...использовать динамическую функцию
import()из машинописного текстаngAfterViewInit() { //We loading the player script on after view is loaded import('assets/scripts/player/player.js'); }измените библиотеку, чтобы она запускалась только после вызова функции из компонента, таким образом вы можете добавить ее в массив скриптов вашего
angular.json
Использование импорта решило это - так просто, что я не знаю, почему я использовал require. Третий вариант хорош, но он заставит меня сменить другие проекты. Большое спасибо
У меня была аналогичная проблема с Google Maps. Решение, которое я нашел, заключалось в создании тега <script> и вставке его в заголовок / тело.