父级子级Angular Router的单个URL

Question

在我的工作模块和应用模块中使用以下Angular 6路线

我目前的工作网址是：www.mydomain.com/jobs/cook/94

但是我想将单级URL用于SEO，所以我想要这样的结果：www.mydomain.com/jobs-cook-94

Job是我的子模块，我想将所有子级别的url转换或重定向到以“ /”插入的“ -”分隔的1级别url，如何在角度6延迟中实现这一点正在加载。

// app-routing.module.ts

const appRoutes: Routes = [
 { 
   path: 'jobs',
   loadChildren: './jobs/jobs.module#JobsModule'
 },
 { 
   path: '**', redirectTo: '' 
 }
];

// jobs-routing.module.ts

    const routes: Routes = [
  {
    path: '',
    component:JobsInHotelComponent,
  },
  { 
    path: ':category/:catID', 
    component: JobsInHotelComponent 
  },

Answer 1

您可以在路线定义中使用matcher属性来匹配路线并从中提取参数。

例如

 RouterModule.forRoot([
  {
    matcher: (url) => {
      if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
        return {
          consumed: url,
          posParams: {
            username: new UrlSegment(url[0].path.substr(1), {})
          }
        };
      }
      return null;
    },
    component: ProfileComponent
  }
])

上面的示例检查数组中是否只有一个段，然后使用正则表达式确保用户名的格式匹配。匹配时，它将返回消耗的整个URL，并将用户名route参数定义为路径的子字符串。如果没有匹配项，则返回null，路由器继续寻找可能与URL匹配的其他路由。就像其他路由一样，它允许您定义子路由，甚至是延迟加载的路由。

您也可以参考This awesome blog了解更多信息。