Я разрабатываю мобильное приложение с nativescript + Angular 8. По сути, приложение загружает толстый объект json из серверной части, а затем с несколькими вложенными маршрутизациями дает возможность выбрать конкретное действие.
Цепочка маршрутизации (каждый модуль является дочерним элементом предыдущего) записана ниже: app-routing.module.ts -> main-routing.module.ts -> asset-routing.module.ts ->future-state.routing.module.ts
в main.component.html представляет список выбираемых ресурсов, динамически генерируемых из загруженного файла json. При щелчке актива отображается новый список выбираемого будущего состояния, динамически генерируемого из json для конкретного актива. Когда выбрано будущее состояние, отображается список выбираемых действий, динамически генерируемых из json для конкретного будущего состояния. В конце пользователь может выбрать действие, и данные отправляются обратно на сервер.
На этапе выбора все в порядке до выбора элемента будущего состояния. Когда я пытаюсь выбрать будущее состояние, код возвращает мне сообщение об ошибке: Uncaught (в обещании): ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: ....
future-state.commponent.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { RouterExtensions } from "nativescript-angular/router";
import { GlobalVariablesService } from '../../../_services/global-variables.service';
import { AndonPossibleIssueOpenStateDto } from '../../../_models/andon-possible-issue-open-state-dto';
@Component({
selector: 'ns-future-state',
templateUrl: './future-state.component.html',
styleUrls: ['./future-state.component.css']
})
export class FutureStateComponent implements OnInit {
id: number;
andonPossibleIssueOpenStateDto: AndonPossibleIssueOpenStateDto;
constructor(
private globalVariables: GlobalVariablesService,
private _route: ActivatedRoute,
private _routerExtensions: RouterExtensions
) { }
ngOnInit(): void {
const idFutureState = +this._route.snapshot.params.id;
this._route.params.subscribe(params => { this.id = params['id']; });
//this.andonPossibleIssueOpenStateDto=this.globalVariables.getAndonBotAssetPossibleStateIssueDto().find(function(element){return element.asset.id==idAsset}) as AndonPossibleIssueOpenStateDto;
}
onBackTap(): void {
this._routerExtensions.back();
}
}
future-state.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { FutureStateRoutingModule } from "./future-state-routing.module";
import { FutureStateComponent } from "./future-state.component";
import { ActivityComponent } from "./activity/activity.component";
@NgModule({
imports: [
NativeScriptCommonModule,
FutureStateRoutingModule
],
declarations: [
FutureStateComponent,
ActivityComponent
],
exports: [FutureStateComponent],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class FutureStateModule { }
будущее состояние-маршрутизация.module.ts
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { FutureStateComponent } from "./future-state.component";
import { ActivityComponent } from "./activity/activity.component";
const routes: Routes = [
{
path: "",
component: FutureStateComponent
},
{
path: "activity/:id",
component: ActivityComponent
}
];
@NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class FutureStateRoutingModule { }
asset.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { RouterExtensions } from "nativescript-angular/router";
import { GlobalVariablesService } from '../../_services/global-variables.service';
import { AndonBotAssetPossibleStateIssueDto } from '../../_models/andon-bot-asset-possible-state-issue-dto';
@Component({
selector: 'ns-asset',
templateUrl: './asset.component.html',
styleUrls: ['./asset.component.css']
})
export class AssetComponent implements OnInit {
id: number;
andonBotAssetPossibleStateIssueDto: AndonBotAssetPossibleStateIssueDto;
constructor(
private globalVariables: GlobalVariablesService,
private _route: ActivatedRoute,
private _routerExtensions: RouterExtensions
) { }
ngOnInit(): void {
const idAsset = +this._route.snapshot.params.id;
this.id = this._route.snapshot.params['id'];
console.log(this._route.snapshot.children);
console.log(this._route.snapshot.routeConfig);
this.andonBotAssetPossibleStateIssueDto=this.globalVariables.getAndonBotAssetPossibleStateIssueDto().find(function(element){return element.asset.id==idAsset}) as AndonBotAssetPossibleStateIssueDto;
console.log(this.andonBotAssetPossibleStateIssueDto.asset);
console.log(this._route.firstChild);
}
onBackTap(): void {
this._routerExtensions.back();
}
}
asset.coponent.html
<ActionBar class="action-bar">
<Label class="action-bar-title" [text]="andonBotAssetPossibleStateIssueDto.asset.name"></Label>
</ActionBar>
<StackLayout class="page page-content">
<ListView [items]="andonBotAssetPossibleStateIssueDto.possibleStateIssueDto.optionStateIssue" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['./futureState', item.futureState.id]" [text]="item.futureState.name" class="list-group-item"></Label>
</ng-template>
</ListView>
</StackLayout>
asset.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { AssetRoutingModule } from "./asset-routing.module";
import { AssetComponent } from "./asset.component";
import { FutureStateModule } from "./future-state/future-state.module";
@NgModule({
imports: [
NativeScriptCommonModule,
AssetRoutingModule,
FutureStateModule
],
declarations: [
AssetComponent
],
exports: [AssetComponent],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AssetModule { }
asset-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NSEmptyOutletComponent } from "nativescript-angular";
import { AssetComponent } from "./asset.component";
import { FutureStateComponent } from "./future-state/future-state.component";
const routes: Routes = [
{
path: "",
component: AssetComponent
},
{
path: "futureState/:id",
component: FutureStateComponent
},
{
path: "futureState",
component: NSEmptyOutletComponent,
loadChildren: () => import("~/app/main/asset/future-state/future-state.module").then((m) => m.FutureStateModule)
}
];
@NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class AssetRoutingModule { }
Ниже сообщения об ошибке:
Ошибка: Uncaught (в обещании): Ошибка: Не удается сопоставить ни один маршрут. Сегмент URL: 'main / asset / 698 / futureState / 6'
JS: Ошибка: невозможно сопоставить никакие маршруты. Сегмент URL: 'main / asset / 698 / futureState / 6'
JS:
в ApplyRedirects.push ... / node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (file: /// node_modules @ angular \ router \ fesm5 \ router.js: 2459: 0) [angular]
JS: в CatchSubscriber.selector (файл: /// node_modules @ angular \ router \ fesm5 \ router.js: 2440: 0) [angular]
JS: at CatchSubscriber.push ... / node_modules / rxjs / _esm5 / internal / operator / catchError.js.CatchSubscriber.error (файл: /// node_modules \ rxjs_esm5 \ internal \operator \ catchError.js: 34: 0) [угловой] JS: at MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error (файл: /// node_modules \ rxjs_esm5 \ internal \Subscriber.js: 79: 0) [angular] JS: at MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error (файл: ///data/data/org.nativescript. AndonMobile / fil ...