Для подгрузки JS скрипта в Angular 8 можно использовать несколько подходов. Вот некоторые из них:
1. Использование скрипта в файле index.html:
- Создайте файл скрипта (например, script.js) и разместите его в папке assets вашего проекта.
- Откройте файл index.html в папке src вашего проекта.
- Внутри секции <head> добавьте тег <script> с атрибутом src, указывающим путь к вашему скрипту, например:
<script src="assets/script.js"></script>
2. Использование скрипта в компоненте:
- Создайте файл скрипта (например, script.js) и разместите его в папке assets вашего проекта.
- В нужном вам компоненте импортируйте Renderer2 из @angular/core:
import { Component, Renderer2, OnInit } from '@angular/core';
- Внедрите Renderer2 в конструктор компонента:
constructor(private renderer: Renderer2) { }
- В методе ngOnInit() используйте метод createElement() объекта Renderer2 для создания элемента script, установите ему атрибут src с путем к вашему скрипту и добавьте его в тело документа:
ngOnInit() {
const script = this.renderer.createElement('script');
script.src = 'assets/script.js';
this.renderer.appendChild(document.body, script);
}
3. Использование скрипта в сервисе:
- Создайте файл скрипта (например, script.js) и разместите его в папке assets вашего проекта.
- Создайте сервис, в котором подгрузите скрипт:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ScriptLoaderService {
private readonly scriptElementId = 'scriptId';
loadScript() {
if (!document.getElementById(this.scriptElementId)) {
const script = document.createElement('script');
script.id = this.scriptElementId;
script.src = 'assets/script.js';
document.body.appendChild(script);
}
}
}
- В нужном вам компоненте внедрите сервис и вызовите его метод loadScript():
import { Component, OnInit } from '@angular/core';
import { ScriptLoaderService } from './script-loader.service';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
constructor(private scriptLoaderService: ScriptLoaderService) {}
ngOnInit() {
this.scriptLoaderService.loadScript();
}
}
Каждый из этих подходов имеет свои особенности и может быть применен в зависимости от ваших требований и особенностей проекта. Выберите тот, который лучше всего подходит для вашей конкретной задачи.