解决Nativescript中的守卫

Question

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

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

请在这里指导我要去哪里。

路由器跟踪日志

rewards-routing.module.ts

   charge = Stripe::Charge.create(
     source: params[:stripeToken],
     amount: current_cart.total,
     currency: 'usd',
     description: "Order ##{current_cart.id}"
   )

rewards.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-list-resolver.service

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.component.ts

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.service.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());
    }
}

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 内添加provider数组，并在此处提供您的解析器。

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