Angular 路由器出口 - 错误：无法匹配任何路由。网址段

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

应用程序组件.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/identifier 时

我收到错误：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 { }

应用程序组件.html

<router-outlet></router-outlet>

主页.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

我认为这不是实现目标的好方法。有一个适合您的工作示例

首先，您需要一个主路由器，它没有名称，所以您的路由应该像这样

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

不幸的是，该 URL 不友好，您应该遵守语法

/primaryRoute(routerOutletName:path)

所以你的网址示例应该是

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