Question

即使我已经定义了路由并将其导入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'

transaction.routing

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

transaction.module

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

Answer 1

事实上，角形路由名称区分大小写。

这意味着我们必须将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
        }
   ]
})

未捕获（承诺）无法匹配任何路由。网址段：

1 个答案: