Question

好的，为了简单起见，我假设我有3个组件：父组件和另外两个组件（子A和子B）。

我希望父组件的网址前缀为＆＃39; / parent＆＃39;并包含其他两个组件之一，默认情况下为组件A，否则为B，他们的网址前缀为＆＃39; childA＆＃39;和＆＃39; childB＆＃39; 。此外，我不希望父组件本身可见，它必须具有childA或childB可查看和如果＆＃39; / parent＆＃39;被称为自动重新路由到＆＃39; / parent / childA＆＃39;。

到目前为止，这是我在路由器中所拥有的并且无法正常工作当我路由到＆＃39; / parent＆＃39;时，我在控制台上收到无效路径错误当我路由到＆＃39; / parent / child [AorB]＆＃39;我的浏览器永远落后，永远不会路由：

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

父母的模板只是一个路由器插座，如下所示：

<router-outlet></router-outlet>

Answer 1

需要像这样添加 pathMatch：＆＃39;完整＆＃39; ：

{
  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个 router-outlet ，这样angular就会知道哪个是父级，哪个是子级。

链接的代码如何？对于孩子，请使用“ ./”，如下所示：

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

对于父母，您可以直接去...

[routerLink]="['parent']"

具有嵌套组件的Angular 5路由

2 个答案: