錯誤：無法匹配任何路由。 懶加載一個Angular輔助路由時

Question

我正在嘗試進行嵌套子路由調用以加載到輔助路由器插座中，但我似乎無法使其工作。 我不斷收到Error: Cannot match any routes. URL Segment:'header/secondary/abc' Error: Cannot match any routes. URL Segment:'header/secondary/abc'

StackBlitz 鏈接： https://stackblitz.com/edit/angular-ivy-t3x2cw?file=src/app/header/header.component.ts

我的預期結果是在普通路由器出口<router-outlet></router-outlet>的左側加載輔助和 Abc 模塊/組件，並在輔助路由<router-outlet name="aux"></router-outlet>的右側加載測試組件<router-outlet name="aux"></router-outlet> 。 如下圖所示。

Answer 1

有幾個問題：

首先，注意header.component.html的內容：

<div>
  <router-outlet></router-outlet>
</div>
<div>
  <router-outlet name="aux"></router-outlet>
</div>

和header組件的路線：

const routes: Routes = [
  {
    path: '',
    component: HeaderComponent,
    children: [
      { path: '', redirectTo: 'secondary', pathMatch: 'full' },
      {
        path: 'secondary',
        loadChildren: () =>
          import('./../secondary/secondary.module').then(
            (m) => m.SecondaryModule
          ),
      },
    ],
  },
];

組件視圖想要顯示的內容與路由配置描述的內容不匹配。 根據經驗，組件X視圖中的內容必須與組件X在路由配置中所需的內容相對應。 在這種情況下， header組件的視圖需要一個命名的 outlet ， aux ，但在路由配置中只有主要出口的路徑（即secondary出口）。

因此，如果您希望您的組件處理多個插座，您可以執行以下操作：

// header.component route configuration

const routes: Routes = [
  {
    path: '',
    component: HeaderComponent,
    children: [
      { path: '', redirectTo: 'secondary', pathMatch: 'full' },
      {
        path: 'secondary',
        loadChildren: () =>
          import('./../secondary/secondary.module').then(
            (m) => m.SecondaryModule
          ),
      },
      
      // !
      {
        path: 'foo',
        outlet: 'aux',
        component: FooComponent,
      },
    ],
  },
];

並且navigate()方法看起來像這樣：

navigate() {
    this.router.navigate([
      "header",
      {
        // key-value pairs
        // `key`: the **name** of the outlet
        // `value`: the paths defined for the outlet
        outlets: {
          primary: ["secondary", "abc"],
          aux: ["foo"]
        }
      }
    ]);
  }

StackBlitz 演示。

此外，如果您想了解更多關於 Angular 路由器的信息，我建議您查看：

• Angular 路由器：揭示一些有趣的事實和特性
• 揭秘 angular/router：什么是 RouterScroller，它為什么有用？