Nativescript-angular2 未捕获（承诺中）：错误：无法匹配具有多个嵌套路由的任何路由

Question

我正在使用 nativescript + Angular 8 开发一个移动应用程序。基本上，该应用程序从后端下载一个胖 json 对象，然后通过多个嵌套路由提供选择特定操作的可能性。

路由链（每个模块都是前一个模块的子模块）如下所示： app-routing.module.ts -> main-routing.module.ts -> assets-routing.module.ts -> future-state.routing.module.ts

在 main.component.html 中呈现了从下载的 json 动态生成的可选资产列表。单击资产时，将显示从特定资产的 json 动态生成的可选未来状态的新列表。 When a future-state is selected a list of selectable activities generated dynamically from the json for the specific future-state is shown.最后用户可以选择活动并将数据发送回后端。

在选择阶段一切正常，直到选择未来状态的项目。当我尝试选择未来状态时，代码返回错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：....

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

}

未来状态.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 { }

future-state-routing.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 { }

资产路由.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 { }

错误信息下方：

错误：未捕获（承诺中）：错误：无法匹配任何路由。 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 (file:///node_modules@angular\router\fesm5\router.js:2440:0) [angular]
JS：在 CatchSubscriber.push.../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (file:///node_modules\rxjs_esm5\internal\operators\catchError.js:34:0) [角度] JS：在 MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (file:///node_modules\rxjs_esm5\internal\Subscriber.js:79:0) [角度] JS：在 MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (file:///data/data/org.nativescript.AndonMobile/fil...

Answer 1

问题是在asset.component.html中请求的链接是/main/asset/[idAsset]/futureState/[idFutureState]，而不是在asset-routing.module.ts中动态生成的路由器类似于/main /asset/futureState/[idFutureState]。

我已经修改了部分：

 {
    path: "futureState/:id",
    component: FutureStateComponent
 }

与：

{
   path: ":this.id/futureState/:id",
   component: FutureStateComponent
}