在angular 4应用程序中实现用户友好的路由

我有一个角度4单页的应用程序。营销需求是检查我们是否可以有如下URL：

www.abc.com/fancyname/x

www.abc.com/fancyname/y

www.abc.com/fancyname/z

当前显示的路线包括： www.abc.com/#/x等等

如何实现上述功能以及如何配置路由

• 迄今为止的进展：

a） 要删除#，我们可以使用pathlocationstratergy，但我们需要尝试相同的方法。我到现在还没试过

b） 我们可以使用childrouting，但我们可能手头没有足够的时间，因为当前的路由没有这样做

目前我们的路线安排如下：

const appRoutes: Routes = [
  { path: 'x', component: xComponent },
  { path: 'y',      component: yComponent},
  { path: 'z',      component: zComponent},
];

we want it to be like: 

const appRoutes: Routes = [
  { path: 'fancyname/x', component: xComponent },
  { path: 'fancyname/y',      component: yComponent},
  { path: 'fancyname/z',      component: zComponent},
];

---

我们假设，如果我们尝试实现类似fancyname/x的东西，它将被视为子路由。我们无法操纵基本href as/fancyname，因为它将破坏所有内部资源（如图像、字体等）的URL。

如果我正确理解了这个问题，您应该使用无组件父路由

像这样：

const appRoutes: Routes = [{ 
  path: 'fancyname', 
  children: [
    { path: 'x', component: xComponent },
    { path: 'y', component: yComponent },
    { path: 'z', component: zComponent }
  ]}
];

---

据我所知，这样做不会改变你的应用程序的任何功能，除了使路线“fancyname/childpath”之外。

谢谢。我还必须添加一些基本href。通过一些后端配置也实现了同样的效果。