时间戳

首页 > 解决方案 > 错误：无法匹配任何路由。URL 段：'table/3'

angular - 错误：无法匹配任何路由。URL 段：'table/3'

问题描述

我试图了解我在使用参数的路线上做错了什么。

我一直在关注它的官方指南（参见下面的参考资料）

问题是我遵循了所有文档的说明：定义路由文件，创建我的自定义路由器插座，将导航添加到按钮或点击方法。

但仍然在控制台中显示此错误：

JS: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'table/3'
JS: Error: Cannot match any routes. URL Segment: 'table/3'
JS:     at ApplyRedirects.noMatchError (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/@angular/router/bundles/router.umd.js:1787:16) [angular]
JS:     at CatchSubscriber.selector (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/@angular/router/bundles/router.umd.js:1752:29) [angular]
JS:     at CatchSubscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/operators/catchError.js:104:31) [angular]
JS:     at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:132:26) [angular]
JS:     at MapSubscriber.Subscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:106:18) [angular]
JS:     at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:132:26) [angular]
JS:     at MapSubscriber.Subscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:106:18) [angular]
JS:     at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:132:26) [angular]
JS:     at MapSubscriber.Subscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:106:18) [angular]
JS:     at LastSubscriber.Subscriber._error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:132:26) [angular]
JS:     at LastSubscriber.Subscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:106:18) [angular]
JS:     at MergeMapSubscriber.OuterSubscriber.notifyError (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/OuterSubscriber.js:22:26) [angular]
JS:     at InnerSubscriber._error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/InnerSubscriber.js:26:21) [angular]
JS:     at InnerSubscriber.Subscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:106:18) [angular]
15:45:07 - File change detected. Starting incremental compilation...

app.component.html

<page-router-outlet></page-router-outlet>

app.routing.ts

import {NgModule} from '@angular/core';
import {NativeScriptRouterModule} from 'nativescript-angular/router';
import {Routes} from '@angular/router';

import {TablesListComponent} from './pages/tables-list/tables-list.component';
import {TableItemDetailsComponent} from './pages/table-item/item-details/item-details.component';


const routes: Routes = [
  { path: '', redirectTo: '/tables', pathMatch: 'full' },
  { path: 'tables', component: TablesListComponent },
  { path: 'table/:id', component: TableItemDetailsComponent, outlet: 'table-outlet' }
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})

表-list.component.ts

<StackLayout>
    <ListView [items]="tab.tables">
        <ng-template let-item="item">

          <StackLayout (tap)="onItemTap(item)">
            <Label [text]="item.number"></Label>
          </StackLayout>

        </ng-template>
    </ListView>

    <StackLayout>
        <router-outlet name="table-outlet"></router-outlet>
    </StackLayout>
</StackLayout>

表-list.component.ts

import {Component, OnInit} from '@angular/core';
import { Router } from '@angular/router';


@Component({
  moduleId: module.id,
  selector: 'tables-list',
  templateUrl: './tables-list.component.html'
})

export class TablesListComponent implements OnInit {

constructor(private router: Router) {}

  onItemTap(item) {

    console.dir('=== Item tapped to go to next page: ', item);

    this.router.navigate(['/table', item.id], {preserveFragment: false});
  }

  ...
}

拜托，我需要帮助才能更好地理解它。

参考

https://docs.nativescript.org/angular/code-samples/routing

https://docs.nativescript.org/angular/core-concepts/angular-navigation

标签： angularangular-routingangular2-nativescript

解决方案

如果 url 是这样的：

http://localhost:4200/feature_1/(dsoutlet1:home)

然后尝试以下代码来导航：

this.router.navigate([ '/feature_1', {outlets: { dsoutlet1: 'home' }}]);

推荐阅读