在Angular中,您可以使用rxjs来订阅等待数据时显示“加载中”。以下是一个例子:
在组件的HTML模板中,您可以添加一个加载指示器,例如一个加载动画或一个加载文本:
加载中...
在组件的TypeScript文件中,您可以使用rxjs的操作符来显示或隐藏加载指示器。在这个例子中,我们使用了tap
操作符来设置isLoading
变量的值:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: `
加载中...
- {{ item }}
`,
})
export class ExampleComponent implements OnInit {
isLoading = true;
data$: Observable;
ngOnInit() {
this.data$ = this.getData().pipe(
tap(() => this.isLoading = false)
);
}
getData(): Observable {
// 模拟异步获取数据
return new Observable(observer => {
setTimeout(() => {
observer.next(['数据1', '数据2', '数据3']);
observer.complete();
}, 2000);
});
}
}
在上面的例子中,isLoading
变量用于控制加载指示器的显示与隐藏。初始值为true
,表示正在加载数据。
在ngOnInit
生命周期钩子中,我们调用getData
方法来获取数据,并使用tap
操作符在数据加载完成后将isLoading
设置为false
。
在模板中,我们使用了async
管道来订阅data$
Observable并实时显示数据。同时,我们使用了*ngIf
指令来根据isLoading
变量的值来显示或隐藏加载指示器。
当getData
方法模拟异步获取数据的过程时,加载指示器将会显示2秒钟,直到数据加载完成后隐藏。