Angular 应用程序不显示解析器

Question

我有一个解析器 - 解析我的可观察到的身份验证状态，但我的 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();
    }

在我的应用程序中-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" }
]

Answer 1

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

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

Angular 应用程序不显示解析器

Angular application displaying nothing with resolver

angular

typescript

angular2-observables