Angular 5路由-空路径不匹配 [英] Angular 5 Routing - Empty Path not Matching

问题描述

我很困惑此路由有什么问题...

I am confused what's wrong with this routing...

app.module.routing:

app.module.routing:

...
  {
    path: 'path1',
    canActivate: [Path1Guard],
    loadChildren: './path1/path1.module#Path1Module',
  },

path1.routing.module:

path1.routing.module:

const path1Routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

据我所知，导航到/path1会导致在此加载AuthenticatedLayoutComponent，然后在AuthenticatedLayoutComponent的路由器出口中加载Path1Component.

As far as I understand, navigating to /path1 should result here in AuthenticatedLayoutComponent being loaded, and then Path1Component being loaded in the router outlet of AuthenticatedLayoutComponent.

如果我将路径指定得更具体:

If I make the path more specific:

  const path1Routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent,
    children: [
      {
        path: 'subpath1',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

...并导航到/path1/subpath1，这就是发生的情况.但是，如果没有子路径，布局组件将在路由器出口中加载但不加载任何内容.那我的方式有什么问题呢?谢谢.

... and navigate to /path1/subpath1, that is exactly what happens. Without the subpath, though, the Layout component loads but loads nothing in the router outlet. So what's wrong with the way I have it? Thanks.

推荐答案

我相信，如果您这样设置配置，您的问题将得到解决

I believe your problem will be solved if you set the configuration like this

const path1Routes: Routes = [
  {
     path: 'path1',
     component: AuthenticatedLayoutComponent,
     children: [
      {
        path: '',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

当您要实例化组件而无需定义新的url路由时，可以使用空路径.

You use empty paths when you want to instantiate a component without the need for defining a new url route.

如果两个都保留为空，则可能只尝试解析为第一个.

If you leave both empty it would probably just try to resolve to the first one.

通过如上所述进行配置，它将识别您处于先前在延迟加载中定义的路由，然后将加载子组件，因为它将与空路径匹配

By setting the configuration as above it will recognise you are on the route you defined previously on the lazy loading and then it will load the child component because it will match the empty path

这篇关于Angular 5路由-空路径不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！