在 Nativescript 中解析守卫

Question

我正在尝试在 Nativescript 中为名为“rewards”的路由实现解析保护，但无法使其正常工作。

问题 - 如果我在路由配置中使用解析防护，则 RewardListComponent 永远不会被激活 - 它卡在“ResolveStart”（请参见下面的屏幕截图），但一旦我移除解析防护，组件就会被激活。

请指导我在哪里出错。

路由器跟踪日志

rewards-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { RewardsListResolverService } from "./services/rewards-list-resolver.service";

import { RewardsListComponent } from "./components/rewards-list/rewards-list.component";

const routes: Routes = [
    {
        path: "rewards",
        component: RewardsListComponent,
        resolve: {
            rewards: RewardsListResolverService
        }
    }
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class RewardsRoutingModule {}

rewards.module.ts

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

import { RewardsRoutingModule } from './rewards-routing.module';
import { NativeScriptCommonModule } from 'nativescript-angular/common';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';

import { RewardsService } from './services/rewards.service';
import { RewardsListResolverService } from './services/rewards-list-resolver.service';

import { RewardsListComponent } from './components/rewards-list/rewards-list.component';

@NgModule({
  declarations: [RewardsListComponent],
  imports: [
    RewardsRoutingModule,
    NativeScriptCommonModule,
    NativeScriptFormsModule
  ],
  schemas: [NO_ERRORS_SCHEMA],
  providers: [
      RewardsService,
      RewardsListResolverService
  ]
})
export class RewardsModule { }

rewards-list-resolver.service

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { SimpleReward } from '../models/simple-reward';
import { Observable } from 'rxjs';
import { RewardsService } from './rewards.service';

@Injectable()
export class RewardsListResolverService implements Resolve<SimpleReward[]> {

  constructor(private rewardsService: RewardsService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SimpleReward[]> {
      return this.rewardsService.getAllRewards();
  }

}

rewards-list.component.ts

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Subscription } from "rxjs";

import { SimpleReward } from '../../models/simple-reward';

@Component({
    templateUrl: "./rewards-list.component.html",
    moduleId: module.id
})
export class RewardsListComponent implements OnInit, OnDestroy {

    rewards: SimpleReward[];

    private subscriptions: Subscription[] = [];

    constructor() {}

    ngOnInit() {
        console.log('Activated');
        // this.subscribeToResolvedData();
    }

    ngOnDestroy(): void {
        this.subscriptions.forEach(x => x.unsubscribe());
    }
}

rewards.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

import { Observable } from 'rxjs';
import { SimpleReward } from "../models/simple-reward";

@Injectable()
export class RewardsService {

    private baseUrl = "http://10.0.2.2:52553/api/rewards";

    constructor(private http: HttpClient) {}

    getAllRewards(): Observable<SimpleReward[]> {
        const url = `${this.baseUrl}/all`;
        return this.http.get<SimpleReward[]>(url);
    }
}

Answer 1

您的服务请求似乎没有完成，但我不明白为什么。你可以试试这个，也许这会揭示一个错误：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SimpleReward[]> {
  return this.rewardsService.getAllRewards().pipe(
    take(1),
    catchError((e) => {
      console.error(e);
      return of([]);
    })
  );
}

如果这不起作用，请尝试将您的解析器更改为：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SimpleReward[]> {
  return of([]);
}

如果这确实有效，您可以确定您的服务调用中有问题。你确定它返回的是一个正常的 200 状态的数组吗？

Answer 2

我认为您应该在 rewards-routing.module.ts 中添加 providers 数组，并在此处提供您的解析器。

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule],
    providers: [RewardsListResolverService]
})