Angular router-outlet - Error: Cannot match any routes. URL Segment

Question

我提前道歉，因为我已经看到了几个关于这个的帖子，但是尽管尝试了很多次我还是无法解决我的问题。

我在 Angular 13.3.9

我尝试按照此处所述使用出口路由器：https://angular.io/api/router/RouterOutlet

我的目标是根据html代码中不同地方的路由加载组件。

这是尝试过的最简单的代码：

路由器

const routes: Routes = [
  { path: 'challenge/pwd', component: ChallengePwd, outlet: 'challenge-pwd' },
  { path: 'identifier', component: Identifier, outlet: 'identifier' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<main>
    <section>
        <logo-loader></logo-loader>
        <section class="presentation">
            <router-outlet name="identifier"></router-outlet>
            <router-outlet name="challenge-pwd"></router-outlet>
        </section>
    </section>
</main>

当我尝试访问 url http://localhost:4201/标识符

我收到一个错误：Error: Cannot match any routes. URL Segment: 'identifier'

我也试过像这样在父组件中封装出口路由：

const routes: Routes = [
  {
    path: 'oauth',
    component: MainPage,
    children: [
      { path: 'challenge/pwd', component: ChallengePwd, outlet: 'challenge-pwd' },
      { path: 'identifier', component: Identifier, outlet: 'identifier' }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<router-outlet></router-outlet>

main.page.html

<main>
    <section>
        <logo-loader></logo-loader>
        <section class="presentation">
            <router-outlet name="identifier"></router-outlet>
            <router-outlet name="challenge-pwd"></router-outlet>
        </section>
    </section>
</main>

但是没有任何效果，我一直收到这个错误Error: Cannot match any routes. URL Segment: 'identifier'

Answer 1

您的正确 url 是：http://localhost:4201/oauth/identifier

您设置 oauth 的路径 children 其中 identifier

Answer 2

我认为这不是实现目标的好方法。有一个working example适合你

首先，你需要一个没有名字的主路由器，所以你的路由应该是这样的

      { path: 'oauth', component: OauthComponent },
      { path: 'challenge-pwd', component: ChallengeComponent, outlet: 'challenge-pwd' },
      { path: 'identifier', component: IdentifierComponent, outlet: 'identifier' },

不幸的是，URL 不友好，您应该尊重语法

/primaryRoute(routerOutletName:path)

所以你的 URL 的例子应该是

http://localhost:4200/oauth(challenge-pwd:challenge-pwd)

Angular router-outlet - Error: Cannot match any routes. URL Segment

Angular router-outlet - Error: Cannot match any routes. URL Segment

router-outlet

angular

angular-router