时间戳

首页 > 解决方案 > Angular 应用程序在解析器中不显示任何内容

angular - Angular 应用程序在解析器中不显示任何内容

问题描述

我有一个解析器 - 解析我的身份验证状态，但我的 Web 应用程序没有显示任何错误 - 有什么想法吗？如果我通过管道映射我的解析器中可观察到的身份验证状态的值，则会发出一个值。

授权解析器

import { AuthenticationService } from '../services/authentication.service';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthResolver implements Resolve<Observable<any>> {
    constructor(private authservice: AuthenticationService) { }

    resolve(): Observable<any> {
        return this.authservice.getAuthState();
    }
}

认证服务

 public getAuthState() {
        return this.authenticationState.asObservable();
    }

在我的 app-routes.ts

export const ROUTES: Route[] = [
    {
        path: '', component: BaseComponent,resolve: { authState: AuthResolver},  children: [
            { path: '', component: HomeComponent, pathMatch: 'full' },
            { path: 'account/create', component: RegisterComponent },
            { path: 'account/login', component: LoginComponent },
        ]
    },

    { path: '404', component: PagenotfoundComponent },
    { path: '**', redirectTo: "/404" }
]

标签： angulartypescriptangular2-observables

解决方案

解析器返回的可观察对象需要完成。只有在那之后，页面才会被加载。实现这一点的一个简单方法是使用take(1)，如果你想要你的 state observable 的最新值。

resolve(): Observable<any> {
    return this.authservice.getAuthState().pipe(
        take(1)
    );
}

推荐阅读