时间戳

首页 > 解决方案 > Uncaught (in promise) 无法匹配任何路由。网址段：

angular - Uncaught (in promise) 无法匹配任何路由。网址段：

问题描述

我的应用程序无法识别我的路线，即使我已经定义并导入了app.module.

接收数据时，我重定向到这个，但我总是有这个异常：

onSubmit(){
    this.transactionService.createTransactionIfNotExist(this.video).subscribe(
      transaction => this.router.navigate([transaction.currentStep.action, this.video.id, transaction.token ]));
  }

transaction.currentStep.action = PreviewStep
this.video.id = 1
transaction.token = f54db125-ca01-4afc-b714-76c127abb261

和例外

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'PreviewStep/1/f54db125-ca01-4afc-b714-76c127abb261'
Error: Cannot match any routes. URL Segment: 'PreviewStep/1/f54db125-ca01-4afc-b714-76c127abb261'

事务路由

export const routing: ModuleWithProviders = RouterModule.forChild([
   { path: 'previewStep/:videoId/:transactionId', component: PreviewStepComponent }
]);

事务模块

import { PreviewStepComponent } from "./components/preview-step/preview-step.component";
import { routing } from './transaction.routing';

@NgModule({
  imports: [
    CommonModule, routing, FormsModule, SharedModule, RouterModule
  ],
  declarations: [PreviewStepComponent],
  providers: []
})
export class TransactionModule { }

应用程序模块

import { AppRoutingModule } from './app-routing.module';
import { TransactionModule } from './transaction/transaction.module';

@NgModule({
  declarations: [
  ],
  imports: [
    AppRoutingModule,
    TransactionModule,
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }

标签： angulartypescriptrouting

解决方案

事实上，角度路由名称是区分大小写的。

这意味着我们必须更改PreviewStep为previewStep以匹配路由名称。

要覆盖这种情况，请更改路由名称或创建一个UrlSerializer.

import { DefaultUrlSerializer, UrlSerializer, UrlTree } from '@angular/router';

export class TitleCaseUrlSerializer extends DefaultUrlSerializer {  
    public parse(url: string): UrlTree {
        function toTitleCase(url) {
            return url.split('/')
                       .map(segment => segment ? 
                                       segment[0].toUpperCase() + segment.substr(1) : 
                                       segment)
                       .join('/');
        }
        return super.parse(toTitleCase(url));
    }
}

@NgModule({
   imports: [ ... ],
   declarations: [ ... ],
   providers: [
        {
            provide: UrlSerializer,
            useClass: TitleCaseUrlSerializer
        }
   ]
})

推荐阅读