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

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

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

另一种方法是使用第三个组件StateContainerComponent，充当容器/页面/布局占位符，其中只有<router-outlet>。这种方法将渲染StateComponent 或TestCentersComponent，但不会像上述方法一样将两者都渲染为父子渲染。也可以通过网址/state/test-centers访问。

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

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

Answer 3

测试场景：

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

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

<router-outlet></router-outlet>

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

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