Angular 5 带有嵌套组件的路由

Question

OK 所以为了简单起见，假设我有 3 个组件：一个 parent 组件和两个其他组件（child A 和 child B）。

我希望 parent 组件 具有 '/parent' 的 url 前缀并包含其他两个组件之一，默认情况下，组件 A，否则 B，它们分别有自己的 'childA' 和 'childB' 的 url 前缀。我也不希望 parent 组件本身可见，它必须具有 childA 或 childB 可见并且 if '/parent ' 被调用它会自动 re-route 到 '/parent/childA'.

到目前为止，这是我的路由器中的内容，它无法正常工作当我路由到“/parent”和路由到“[=”时，控制台上出现无效路径错误30=][AorB]' 我的浏览器永远滞后并且从不路由：

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

parent 的模板只是一个 router-outlet 像这样：

<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 router-outlet，这样 angular 就会知道哪个是 parent哪个是 child..

您的链接代码如何？对于 children，使用 './'，像这样：

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

对于parent，可以直接去...

[routerLink]="['parent']"

Angular 5 带有嵌套组件的路由

Angular 5 routing with nested components

nested

nested-views

angular-routing

angular-router

angular5