在Angular 7中,可以使用interval
操作符来代替setInterval
函数来加载外部脚本。interval
操作符是RxJS库中的一部分,它创建一个可以按照指定的时间间隔发出值的Observable。
以下是一个示例代码,演示如何在Angular 7中使用interval
操作符来加载外部脚本:
npm install rxjs
interval
操作符:import { interval } from 'rxjs';
interval
操作符来加载外部脚本。以下是一个示例代码:import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
constructor() { }
ngOnInit() {
// 使用interval操作符来加载外部脚本
interval(5000).subscribe(() => {
const script = document.createElement('script');
script.src = 'https://external-script-url.com/script.js';
script.async = true;
document.body.appendChild(script);
});
}
}
在上面的示例中,interval(5000)
表示每隔5秒发送一个值。在subscribe
回调函数中,我们创建一个script
元素并设置其src
属性为外部脚本的URL。然后,我们将这个script
元素追加到body
元素中。
这样,每隔5秒,就会加载一个新的外部脚本。你可以根据需要调整时间间隔。
请记住,在使用interval
操作符时,一定要取消订阅,以防止内存泄漏。你可以在组件的ngOnDestroy
生命周期钩子中取消订阅,如下所示:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subscription } from 'rxjs';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {
private subscription: Subscription;
constructor() { }
ngOnInit() {
this.subscription = interval(5000).subscribe(() => {
const script = document.createElement('script');
script.src = 'https://external-script-url.com/script.js';
script.async = true;
document.body.appendChild(script);
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
通过在ngOnDestroy
方法中取消订阅,可以确保在组件被销毁时停止加载外部脚本的操作。