Разрешить охрану в Nativescript

Question

Я пытаюсь внедрить охрану разрешения для маршрута с именем 'rewards' в Nativescript, но не могу заставить его работать.

Проблема - RewardListComponent никогда не активируется, если я использую resolGuard в конфигурации маршрутизации - он застрял на «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 , и здесь укажите свой преобразователь.

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