Динамически загружать внешний файл javascript из Углового компонента

Я создаю Угловое приложение, использующее Angular 4 и CLI. Я пытаюсь добавить виджет поиска SkyScanner в один из моих компонентов.

Пример виджета Skyscanner

Часть реализации требует добавления нового внешнего скрипта:

 

Я не уверен в правильности ссылки на этот файл. Если я добавлю скрипт в свой файл index.html, виджет не загрузится, если не будет выполнено полное обновление страницы. Я предполагаю, что скрипт пытается манипулировать DOM при загрузке, а элементы не существуют при запуске скрипта.

Каков правильный способ загрузки сценария только при загрузке компонента, содержащего виджет Skyscanner?

7 Solutions collect form web for “Динамически загружать внешний файл javascript из Углового компонента”

Попробуйте загрузить внешний JavaScript на загрузку компонента, как показано ниже:

 loadAPI: Promise; constructor() { this.loadAPI = new Promise((resolve) => { this.loadScript(); resolve(true); }); } public loadScript() { var isFound = false; var scripts = document.getElementsByTagName("script") for (var i = 0; i < scripts.length; ++i) { if (scripts[i].getAttribute('src') != null && scripts[i].getAttribute('src').includes("loader")) { isFound = true; } } if (!isFound) { var dynamicScripts = ["https://widgets.skyscanner.net/widget-server/js/loader.js"]; for (var i = 0; i < dynamicScripts .length; i++) { let node = document.createElement('script'); node.src = dynamicScripts [i]; node.type = 'text/javascript'; node.async = false; node.charset = 'utf-8'; document.getElementsByTagName('head')[0].appendChild(node); } } } 

добавьте loader.js в папку с вашими активами, а затем в ваш angular-cli.json

 "scripts": ["./src/assets/loader.js",] 

затем добавьте это в свой typings.d.ts

  declare var skyscanner:any; 

и вы сможете использовать его

  skyscanner.load("snippets","2"); 

Я сделал этот fragment кода

  addJsToElement(src: string): HTMLScriptElement { const script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; this.elementRef.nativeElement.appendChild(script); return script; } 

И тогда назовите это так

 this.addJsToElement('https://widgets.skyscanner.net/widget-server/js/loader.js').onload = () => { console.log('SkyScanner Tag loaded'); } 

EDIT: с новым рендерером Api это можно записать так:

 constructor(private renderer: Renderer2){} addJsToElement(src: string): HTMLScriptElement { const script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; this.renderer.appendChild(document.body, script); return script; } 

StackBlitz

У меня была та же проблема, но в моем случае я импортировал 10 библиотек в конец html-файла, и в этих библиотеках было много методов, слушателей, событий и т. Д., И в моем случае мне не нужно было вызовите метод специально.

Пример того, что у меня было:

  
...

Как уже упоминалось, это не сработало. Затем я нашел кое-что, что помогло мне: ответ Милад

  1. Удалите вызовы скриптов в app.component.html. Вы должны связать эти сценарии в файле app.component.ts.

  2. В ngOnInit () используйте метод добавления библиотек, например:

``

  export class AppComponent implements OnInit { title = 'app'; ngOnInit() { this.loadScript('http://www.some-library.com/library.js'); this.loadScript('../assets/js/my-library.js'); } } public loadScript(url: string) { const body =  document.body; const script = document.createElement('script'); script.innerHTML = ''; script.src = url; script.async = false; script.defer = true; body.appendChild(script); } } 

Это работает для меня. Я использую Angular 6, надеюсь, что это поможет.

Вы можете сделать одну вещь

если у вас есть angular-cli.json

то вы можете объявить скрипт

как

 "scripts": ["../src/assets/js/loader.js"] 

И затем объявите skyscanner в своем компоненте

как

 declare var skyscanner:any; 

Это оно!

Надеюсь, это поможет вам

Вы можете создать свою собственную директиву для загрузки сценария, как показано ниже.

 import { Directive, OnInit, Input } from '@angular/core'; @Directive({ selector: '[appLoadScript]' }) export class LoadScriptDirective implements OnInit{ @Input('script') param: any; ngOnInit() { let node = document.createElement('script'); node.src = this.param; node.type = 'text/javascript'; node.async = false; node.charset = 'utf-8'; document.getElementsByTagName('head')[0].appendChild(node); } } 

И вы можете использовать его в любом месте вашего шаблона компонентов, как показано ниже.

  

Например, чтобы динамически загружать JQuery в ваш компонент, вставьте ниже код в шаблон вашего компонента

  

Примечание. Это специально для внешних ссылок js! Шаг 1. Добавьте свой угловой скрипт в файл index.html внизу вашего тела. Я пробовал все другие способы, но не смог.

       
Interesting Posts

После удвоения размера виртуального диска в VirtualBox fdisk -l все еще показывает размер старого диска в гостевой CentOS

Лучший способ ограничить пользователя вводом времени в JTextField

Удалите защищенные предупреждения (_CRT_SECURE_NO_WARNINGS) из проектов по умолчанию в Visual Studio

Какие маршрутизаторы вы предпочитаете для DD-WRT или OpenWRT?

Как изменить разрешение кругов в Sketchup

Заставить JSON.NET включать миллисекунды при сериализации DateTime (даже если компонент ms равен нулю)

Разница между типом данных с плавающей запятой и десятичной точкой

Как узнать, включен ли GPS-устройство Android?

Каков самый чистый способ применения map () для словаря в Swift?

Удаленный рабочий стол от mac до ubuntu?

Дата календаря в формате yyyy-MM-dd в java

Флуктуация ping для определенного ISP-магистрали

Использование DataAnnotations с платформой Entity Framework

Как определить, какой шрифт используется браузером для рендеринга текста?

Автоматизация нажатий клавиш и действий в Windows

Давайте будем гением компьютера.