Nativescript-angular2 Uncaught (in promise): Error: Cannot match any routes with multiple nested routing

Question

我正在使用 nativescript + Angular 8 开发一个移动应用程序。基本上，该应用程序从后端下载一个胖 json 对象，然后使用多个嵌套路由为 select 一个特定的动作。

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

在 main.component.html 中呈现了 select 可用资产的列表，这些资产是从 json 下载的动态生成的。单击资产时，会显示从 json 为特定资产动态生成的 select 可用未来状态的新列表。 select 编辑未来状态时，会显示从 json 为特定未来状态动态生成的 select 可用活动列表。最后，用户可以 select activity 并将数据发送回后端。

在 selection 阶段一切正常，直到未来状态项 selection。当我尝试 select 一个未来状态代码 return 时，错误：未捕获（承诺）：错误：无法匹配任何路由。 URL 细分：....

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

}

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

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

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

错误信息下方：

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main/asset/698/futureState/6'

JS: Error: Cannot match any routes. URL Segment: 'main/asset/698/futureState/6'

JS:
at ApplyRedirects.push.../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (file:///node_modules@angular\router\fesm5\router.js:2459:0) [angular]
JS: at CatchSubscriber.selector (file:///node_modules@angular\router\fesm5\router.js:2440:0) [angular]
JS: at CatchSubscriber.push.../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (file:///node_modules\rxjs_esm5\internal\operators\catchError.js:34:0) [angular] JS: at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (file:///node_modules\rxjs_esm5\internal\Subscriber.js:79:0) [angular] JS: at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (file:///data/data/org.nativescript.AndonMobile/fil...

Answer 1

问题是在 asset.component.html 中请求的 link 是 /main/asset/[idAsset]/futureState/[idFutureState] 而不是在 asset-[=21 中动态生成的路由器=] 类似于 /main/asset/futureState/[idFutureState].

我修改了部分：

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

与：

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

Nativescript-angular2 Uncaught (in promise): Error: Cannot match any routes with multiple nested routing

Nativescript-angular2 Uncaught (in promise): Error: Cannot match any routes with multiple nested routing

angular2-nativescript