帶有嵌套組件的Angular 5布線

Question

好的，為簡單起見，我有3個組件：一個父組件和兩個其他組件（子A和子B）。

我希望父組件的URL前綴為“ / parent”，並包含其他兩個組件之一 ，默認情況下為組件A，否則為B，它們分別具有自己的url前綴“ childA”和“ childB” 。 另外我也不希望父組件本身可見，它必須具有childA或childB可見，並且如果調用“ / parent”，它將自動重新路由到“ / parent / childA”。

到目前為止，這是我路由器中的所有物品，並且無法正常工作，當我路由到“ / parent”時以及在路由到“ / parent / child [AorB]”時，我在控制台上收到無效的路徑錯誤永無止境的路線：

{
  path: 'parent', component: ParentComponent,
  children : [
    {
      path: '',
      redirectTo: 'childA' 
    },
    {
      path: 'childA',
          component: ChildAComponent
    }, {
      path: 'childB',
      component: childBComponent
    }
  ]
}

父級的模板就像這樣的路由器出口：

<router-outlet></router-outlet>

Answer 1

需要添加pathMatch：'full'像這樣：

{
  path: 'parent', component: ParentComponent,
  children : [
    {
      path: '',
      redirectTo: 'childA',
      pathMatch: 'full' //<--------- Need this here
    },
    {
      path: 'childA',
          component: ChildAComponent
    }, {
      path: 'childB',
      component: childBComponent
    }
  ]
}

Answer 2

確保在html中定義了2個路由器出口 ，以便angular知道哪個是父級，哪個是子級。

鏈接的代碼如何？ 對於孩子，請使用“ ./”，如下所示：

[routerLink]="['./childA']"

對於父母，您可以直接去...

[routerLink]="['parent']"