Реализация удобных для пользователя маршрутов в приложении Angular 4

Question

У меня есть угловое приложение на 4 страницы. Маркетинговым спросом является проверка, можем ли мы иметь URL-адреса, подобные этому:

www.abc.com / fancyname / х

www.abc.com / fancyname / у

www.abc.com / fancyname / г

В настоящее время отображаются следующие маршруты: www.abc.com/#/x и т. д.

Как можно реализовать вышеперечисленное и как настроить маршрут?

• Прогресс до сих пор:

a) Чтобы удалить #, мы можем использовать стратегию pathlocation, но нам нужно попробовать то же самое. До сих пор не пробовал

b) Мы можем использовать дочернюю маршрутизацию, но у нас может не хватить времени, поскольку текущая маршрутизация не выполняется таким образом.

В настоящее время наша маршрутизация выполняется как:

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, это будет рассматриваться как дочерняя маршрутизация. Мы не можем манипулировать base-href как / fancyname, так как он сломает URL для всех внутренних ресурсов, таких как изображения, шрифты и т. Д.

Answer 1

Если я правильно понял вопрос, вы должны просто использовать родительский маршрут без компонентов.

Вроде так:

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

Насколько я знаю, выполнение этого способа не должно ничего менять в вашем приложении, кроме создания маршрутов "fancyname / childpath".