在Angular中,可以使用RxJS的Observable来实现在等待从window.location.assign加载内容时显示一个加载动画。下面是一个代码示例:
npm install rxjs
import { Observable, interval, fromEvent } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
showLoadingAnimation(): void {
// 创建一个Observable,每500毫秒发出一个值
const interval$ = interval(500);
// 创建一个Observable,当window.location.href改变时发出一个值
const change$ = new Observable(observer => {
const handler = () => observer.next(window.location.href);
fromEvent(window, 'click').subscribe(handler); // 监听click事件,当用户点击页面时发出一个值
return () => window.removeEventListener('click', handler);
});
// 合并两个Observable,并在window.location.href改变时取消interval$
interval$.pipe(takeUntil(change$)).subscribe(() => {
// 显示加载动画的代码
console.log('显示加载动画...');
});
}
ngOnInit(): void {
this.showLoadingAnimation();
}
现在,当组件加载时,它将定期检查window.location.href是否更改,并在等待加载新内容时显示加载动画。当用户点击页面时,interval将停止循环检查,加载动画也将停止显示。