如何在Angular 11中创建加载组件

Question

我需要用Angular 11创建一个加载组件．例如，当加载数据时，我希望我的加载组件要显示，否则其他组件应该工作。

我没有一个合适的主意来做这件事?

有人能帮我吗?

Answer 1

你可以在应用组件中创建全屏加载覆盖，并使用service和observable来显示和隐藏该组件

应用组件:html:

<div *ngIf="loadingService.isLoading$ | async">Loading...</div>

ts:

constructor(public loadingService: LoadingService) {
}

加载服务:

class LoadingService {
private isLoading = new Subject<boolean>();
isLoading$ = this.isLoading as Observable;
toggleLoading(val: boolean) {
this.isLoading.next(val);
}
}

开始从任何组件加载，注入服务并调用toggle加载方法:

constructor(private loadingService: LoadingService) {
this.loadingService.toggleLoading(true);
}

在这段代码中可能有一些语法错误或拼写错误，因为我没有测试它，只是分享这个想法如果您遇到其他问题，请告诉我。