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