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

问题描述 投票：0回答：1

我正在使用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为特定的未来状态生成的可选活动列表。最后，用户可以选择活动并将数据发送回后端。

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

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

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

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

错误消息下方：错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“ main / asset / 698 / futureState / 6”JS：错误：无法匹配任何路由。网址段：“ 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 ...

angular2-nativescript
1个回答
0
投票

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

我修改了部分：

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

with：

{
   path: ":this.id/futureState/:id",
   component: FutureStateComponent
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.