Angular 路由未触发

Question

我的网站有类似这样的路线：

https://example.com/boat/categories/name-3

我这样定义路由：

    const routes: Routes = [
      {
        path: '',
        component: LayoutBoxComponent,
        children: [
          {
            path: '',
            component: HomeComponent
          },
          {
            path: 'posts/:slug',
            component: PostComponent
          },
          {
            path: ':site_name',
            component: HomeComponent,
            children: [
              {
                path: 'categories/:by_category',
                component: CategoryComponent    <==== This component does not seems to triggered
              }
            ]
          }
        ]
      }
    ]

当尝试访问路由 https://example.com/boat/categories/name-3 时，CategoryComponent 没有被调用，我似乎不知道为什么。想法？

编辑

在我的例子中：

https://example.com/boat/categories/name-3

匹配此模式：

https://example.com/:site_name/categories/:by_category

boat这里是动态的。也可以是 car 或 train

Answer 1

要访问子路由，您需要在父路由中使用 <router-outlet>。

因此，要访问 CategoryComponent，您需要 LayoutBoxComponent 和 HomeComponent 在它们的 html 文件中有一个 <router-outlet></router-outlet>。

Stackblitz example - can be tested by setting the route to: https://angular-ivy-b4kdcc.stackblitz.io/test/categories/x

Angular 路由未触发

Angular route not triggered

router

angular

编辑