角路由器出口-錯誤：無法匹配任何路由。網址段-有解無憂

我提前道歉，因為我已經看過幾篇關于這個的帖子，但是盡管做了很多嘗試，我還是無法解決我的問題。

我在 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/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 { }

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'

uj5u.com熱心網友回復：

我認為這不是實作目標的好方法。有一個適合您的作業示例

首先，你需要一個沒有名字的主路由器，所以你的路由應該是這樣的

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

不幸的是，網址不友好，您應該尊重語法

/primaryRoute(routerOutletName:path)

所以你的網址的例子應該是

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

uj5u.com熱心網友回復：

您的正確網址是：http://localhost:4201/oauth/identifier

你設定路徑oauth 和這些的孩子是identifier

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/479664.html

標籤：有角度的角路由器路由器插座

上一篇：用于多個電子郵件地址驗證的正則運算式

下一篇：制作其他兩個組合的新陣列