angular - 在 CanActivate 期间显示加载指示器

Question

在我的 Angular 应用程序中，我使用 CanActivate 守卫来保护特定路由器状态下的访问。

CanActivate 守卫执行的检查可能会持续 3-4 秒，在没有加载指示器(即微调器)的情况下等待这段时间非常烦人。

是否有“标准”方式在 CanActivate 检查期间显示加载微调器？

非常感谢

Answer 1

要回答您的问题，没有“标准”方法可以做到这一点。

但这很容易。我通过执行以下操作解决了这个问题:

将 AuthGuard 服务导入您的 app.component.ts 文件:

import { Component, OnInit } from '@angular/core';

// Import AuthGuard service here - double check the path
import { AuthGuard } from './services/auth.guard';

@Component({
    selector: 'body',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

    // Inject AuthGuard service here
    constructor(private authGuard: AuthGuard) { }

    ngOnInit() { }
});

将加载程序 HTML 添加到您的 app.component.html 文件中:

<router-outlet></router-outlet>
<div class="central-loader" *ngIf="(authGuard.loader)"><div><i class="fa fa-spin fa-spinner"></i>&nbsp; Loading...</div></div>

注意上面加载程序 HTML 中的 *ngIf。这会检查 authGuard.loader 变量，如果此变量的值设置为 true，则加载此 HTML 代码。

在 AuthGuard 文件中(在我的例子中是 services/auth.guard.ts):

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable, Subject } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {

    private loader$ = new Subject<boolean>();
    public loader = false;

    constructor() { 
        this.loader$.debounceTime(300).subscribe(loader => {
            this.loader = loader;
        });
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        this.loader$.next(true);

        // Returning an Observable for async checks
        return new Observable<boolean>(obs => {
            // Sample 2 second async request
            setTimeout(() => {
                this.loader$.next(false);
                obs.next(true);
                obs.complete();
            }, 2000);
        });

    }
}

也可以直接在模板中用async管道调用loader$，例如:

<router-outlet></router-outlet>
<div class="central-loader" *ngIf="(authGuard.loader$ | async)"><div><i class="fa fa-spin fa-spinner"></i>&nbsp; Loading...</div></div>

(在这种情况下将 loader$ 设置为 public)。

但如果 canActivate 检查在不到 300 毫秒内完成，我不希望此加载程序出现，这就是为什么我使用 debounceTime()< 订阅 loader$/.

我知道即使向观察者发送 false 也会延迟 300 毫秒，但这对我来说没问题。

顺便说一句，这是我用于加载程序的 CSS，水平和垂直居中，并带有整个页面阻塞覆盖:

.central-loader {
    position: fixed;
    display: flex;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.2);
    z-index: 1050;
}

.central-loader > div {
    height: 42px;
    line-height: 40px;
    width: 200px;
    text-align: center;
    border: 2px #faf2cc solid;
    color: #8a6d3b;
    background-color: #fcf8e3;
    margin: auto;
}

不要忘记在 app.module.ts 中导入 AuthGuard:

import { NgModule } from '@angular/core';

....

// Import AuthGuard service here - double check the path
import { AuthGuard } from './services/auth.guard';

@NgModule({
    ....
    providers: [
        AuthGuard,
        ....
    ],
    ....
});

希望对您有所帮助!