带有参数“无法匹配任何路线"的角嵌套路线 [英] Angular nested route with param "Cannot match any routes"

问题描述

这是我正在研究的3条路线:

Here are the 3 routes I'm working on:

• game/:id
• 游戏/:id/定价
• 游戏/:id/历史记录

我希望 game/:id 作为父视图，并容纳一个< router-outlet> 供孩子们在其中进行渲染.但是，我一直收到此错误:无法匹配任何路由.网址段:游戏/1/历史记录".

I'd like the game/:id to be the parent view, and house a <router-outlet> for the children to render inside of it. However, I keep getting this error: Cannot match any routes. URL Segment: 'game/1/history'.

感谢您的帮助.

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { CommonModule } from "@angular/common";
import { GameComponent } from "./game.component";
import { GamePricingComponent } from './game-pricing.component';
import { GameHistoryComponent } from './game-history.component';

const routes: Routes = [
  { path: 'game/:id', component: GameComponent, children: [
    { path: 'pricing', component: GamePricingComponent, outlet: 'game' },
    { path: 'history', component: GameHistoryComponent, outlet: 'game' }
  ]},
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    CommonModule
  ],
  declarations: [
    GameComponent,
    GamePricingComponent,
    GameHistoryComponent
  ],
  exports: [
    RouterModule
  ]
})
export class RoutingModule {}

GameComponent:

game/:id 路线是父视图，它在内部为孩子提供了< router-outlet name ="game"> (定价和历史记录).

GameComponent:

The game/:id route is the parent view, which has a <router-outlet name="game"> inside of it for the children (pricing & history) to render into.

import { Component } from "@angular/core";

@Component({
  template: `
<div>Game stuff</div>
<router-outlet name="game"></router-outlet>
`
})
export class GameComponent {}

RootModule

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RoutingModule } from "./routing.module";

@NgModule({
  imports: [
    BrowserModule,
    RoutingModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export default class AppModule { }

AppComponent

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
<div class="base">
    <router-outlet></router-outlet>
</div>
`,
})
export class AppComponent {}

推荐答案

一段时间后，我能够通过删除< router-outlet> 的命名来解决此问题.事实证明，单个子路由器出口正常工作"-因此不需要命名...

After a (long) while, I was able to solve this by removing the naming for the <router-outlet>. Turns out, single child router outlets 'just work' - so naming isn't required...

但是，在撰写本文时，我仍然不知道如何在子路由中使用路由器出口命名.如果有人想在这里详细说明，我将不胜感激.(也许只有在同一级别有多个插座的情况下才能命名?)

However, as of writing this, I'm still unaware of how to use router outlet naming within child routes. If anyone wants to elaborate here, I'd be more than appreciative. (maybe naming only works if there's more than 1 outlet at the same level?)

这篇关于带有参数“无法匹配任何路线"的角嵌套路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！