Mục lục
  1. Cách 1: sử dụng ElementRef và Renderer2
  2. Cách 2: sử dụng JS document

Đôi khi bạn muốn chạy một file, hay 1 thư viện JS tại một component trong ứng dụng Angular của mình,  mà không cần phải load thư viện đó trên toàn bộ ứng dụng của mình, bạn có thể tham khảo các cách dưới đây:

Cách 1: sử dụng ElementRef và Renderer2

declare var jQuery: any;

export class LoginComponent {

 constructor(
 private readonly elementRef: ElementRef,
 private renderer: Renderer2) {
 }

 ngOnInit() {
 const script = this.renderer.createElement('script');
 script.src ='https://code.jquery.com/jquery-3.7.1.min.js';
 script.onload = () => {
 console.log('script jquery loaded');
 console.log(jQuery)
 };
 this.renderer.appendChild(this.elementRef.nativeElement, script);
 }

 ngAfterViewInit() {

 }

}

Đây là 1 cách tương đối đơn giản để sử dụng 1 file hay 1 thư viện JS trong 1 component nhất định. Trong ví dụ này, ta sử dụng Renderer2 là 1 abstract class thuộc gói thư viện @angular/core, nó cho phép thao tác với các phần tử DOM một cách an toàn và linh hoạt. Renderer2 cũng được khuyến nghị dùng để thao tác với Dom thay vì sử dụng JS thuần hoặc ElementRef. ElementRef là một class trong Angular được sử dụng để truy cập đến một phần tử DOM cụ thể(tại ví dụ này nó là Dom của Login Component).

Cách 2: sử dụng JS document

declare var jQuery: any;

export class LoginComponent {
 loadAPI: Promise<any>;

 ngOnInit() {
 this.loadAPI = new Promise((resolve) => {
 this.loadScript();
 resolve(true);
 }).then(result => {
 // Tạo thẻ script thành công, tuy nhiên chưa chắc chắn jQuery loaded
 });
 }

 public loadScript() {
 let node = document.createElement('script');
 node.src ='https://code.jquery.com/jquery-3.7.1.min.js';
 node.type ='text/javascript';
 node.async = true;
 node.charset ='utf-8';
 node.onload = () => {
 console.log('___jquery loaded___')
 console.log(jQuery)
 }
 document.getElementsByTagName('head')[0].appendChild(node);
 }
}

Trong JavaScript, document là một đối tượng global đại diện cho cây DOM (Document Object Model) của trang web hiện tại. document cung cấp các phương thức và thuộc tính để tương tác với nội dung và cấu trúc của trang web. Trong ví dụ 2 này ta viết hoàn toàn bằng JS thuần thay vì Renderer2.