angular - Angular 中未检测到子路由

Question

我正在开发一个离子应用程序（Ionic 5），似乎我无法让路由正常运行。这是我的应用程序路线。

但似乎我无法让这个网址工作 /state/test-centers

Angular没有找到那条路线..这是跟踪

我只是在尝试这个..我也试过这个..也没有用..

{
    path: "state",
    component: StateComponent,
    pathMatch: "full",
    children: [
      { path: "test-centers", component: TestCentersComponent, pathMatch: "full" }
    ]
  }

Answer 1

你不需要pathMatch策略，你的路由应该是这样的

{
  path: "state",
  component: StateComponent,
   children: [
   path: "",
   component: StateComponent,
    children: [
     {path: "test-centers" , component:TestCentersComponent}
   ]
 ] 
}

Answer 2

测试场景：

{
    path: 'state',
    component: StateComponent,
    children: [
      {
        path: 'centers',
        pathMatch: 'full',
        component: TestCentersComponent,
      },
    ],
},

此外，您需要将其添加到您的 StateComponent：

<router-outlet></router-outlet>

路线的微小变化。我认为pathMatch: 'full'不需要，因为它匹配整条路线，但您添加/test-centers的是不匹配的。

另外，如果您不打算添加更多的第一级孩子，那么我认为可以将第二级孩子移动到第一级，因为您只添加path: ''了没有多大作用的。

Answer 3

如果您想将TestCentersComponent内容显示为的子级，StateComponent则包含<router-outlet>在 的模板中StateComponent并使用以下路由定义。您可以使用 url 访问它/state/test-centers，您将看到父组件与子组件模板一起呈现，而不是插座。

{
  path: 'state',
  component: StateComponent,
  children: [
    { path: 'test-centers', component: TestCentersComponent },
  ]
}

另一种方法是使用第三个组件，StateContainerComponent充当容器/页面/布局占位符，其中除了 a 之外什么都没有<router-outlet>。这种方法将像上述方法一样将两者都渲染为父子渲染，但不能同时渲染StateComponent。TestCentersComponent也可以通过 url 访问/state/test-centers。

{
  path: 'state',
  component: StateContainerComponent,
  children: [
    { path: 'test-centers', component: TestCentersComponent },
    { path: '', component: StateComponent },
  ]
}

这是一个stackblitz 演示，展示了这两种方法，并指出对于后者，我state-container仅出于演示目的使用了该路线。