angular - 在 Nativescript 中解析守卫
问题描述
我正在尝试为 Nativescript 中名为“rewards”的路由实现解析保护,但无法使其正常工作。
问题 - 如果我在路由配置中使用解析保护,RewardListComponent 永远不会被激活 - 它卡在“ResolveStart”(请参见下面的屏幕截图),但是一旦我删除解析保护,组件就会被激活。
请指导我在这里出错的地方。
路由器跟踪日志
奖励路由.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 {}
奖励.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 { }
奖励列表解析器服务
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();
}
}
奖励列表.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());
}
}
奖励服务.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);
}
}
解决方案
您的服务请求似乎没有完成,但我不明白为什么。你可以试试这个,也许这会揭示一个错误:
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 状态吗?
推荐阅读
- yii2 - Yii2 ActiveRecord::save() 不适用于通知
- c++ - 来自 std::cin 的 std::getline - 通过向上/向下按钮输入历史记录在 Linux 中不起作用
- sql - 每行不同的 SQL Where 子句
- ios - 在 GMSMapView 上未调用 tableView(_:didSelectRowAt:)
- .net - ClickOnce exe文件需要解锁才能工作
- python - Plink 输出在同一行
- javascript - array.reduce 通过递归实现
- ionic-framework - Ionic 3 在 http 请求上显示加载符号
- ios - 无法使用“NSKeyValueChangeKey”类型的索引为“[NSObject : AnyObject]”类型的值下标
- c# - c# reader.read 循环不起作用