Мой app-routing.module.ts содержит маршруты параметров, которые ведут к отдельному идентификатору. Я обнаружил, что мой путь с подстановочными знаками был сломан во время тестирования моих маршрутов.
После серьезного тестирования оказалось, что использование другого маршрута ниже пути параметра также не работает.
app-routing.module.ts (исходная установка)
const routes: Routes = [
{
path: '',
pathMatch: 'full',
loadChildren: () =>
import('./features/home/home.module').then((m) => m.HomeModule),
},
{
path: 'about',
loadChildren: () =>
import('./features/about/about.module').then((m) => m.AboutModule),
},
{
path: 'contact',
loadChildren: () =>
import('./features/contact/contact.module').then((m) => m.ContactModule),
},
{
path: ':id',
loadChildren: () =>
import('./features/profile/profile.module').then(
(m) => m.ProfileModule
),
},
// PATH BELOW NOT WORKING 👇
{
path: '**',
redirectTo: '',
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
initialNavigation: 'enabledBlocking',
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}
app-routing.module.ts (тестирование путем замены некоторых настроек пути)
const routes: Routes = [
{
path: '',
pathMatch: 'full',
loadChildren: () =>
import('./features/home/home.module').then((m) => m.HomeModule),
},
{
path: ':id',
loadChildren: () =>
import('./features/profile/profile.module').then(
(m) => m.ProfileModule
),
},
// PATH BELOW NOT WORKING 👇
{
path: 'about',
loadChildren: () =>
import('./features/about/about.module').then((m) => m.AboutModule),
},
{
path: 'contact',
loadChildren: () =>
import('./features/contact/contact.module').then((m) => m.ContactModule),
},
{
path: '**',
redirectTo: '',
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
initialNavigation: 'enabledBlocking',
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}
@Akxe Я пытался использовать сопоставитель, но у меня возникли проблемы с дочерними маршрутами. Но почему это плохая практика?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Прежде всего, маршрут redirectTo должен содержать свойство pathMatch, иначе он не будет маршрутизироваться (даже не должен компилироваться)
Далее, это плохая практика — предоставлять маршруты на одном уровне, например
/home/about
/home/contact
/home/:id
Технически это работает, а потому что зависит от порядка предоставленных маршрутов. если ваш :id маршрут установлен первым в списке, то about и contact тоже становятся идентификаторами.
Поэтому лучшим решением было бы просто разделить маршруты вот так
/home/about
/home/contact
/home/items/:id
В противном случае вы можете использовать защиту canMatch (например, canActivate), но опять же, я бы посчитал это плохой практикой. Просто следуйте RESTFul-подобной структуре для ваших маршрутов, это лучший и самый простой вариант.
Привет, спасибо за ответ! Но как бы вы создали что-то вроде веб-сайта с персонализированным кратким URL-адресом, например, Instagram.com/foo.
@syahiruddin Я бы сделал instagram.com/users/foo
Я прочитал документацию Angular по маршрутизации с urlmatcher angular.io/guide/routing-with-urlmatcher можно с уверенностью сказать, что если я хочу установить имя пользователя/идентификатор в качестве пути, я могу использовать сопоставление URL?
Я бы предпочел использовать защиту canMatch, но на ваше усмотрение!
Извините, только одна последняя вещь, чтобы лучше понять это. Вы упомянули, что это плохая практика, не могли бы вы уточнить, почему это плохая практика, или направить меня к статье об этом, чтобы я мог узнать? Спасибо!
У меня их нет, так как это только личное мнение. Но рассуждение таково: если вы полагаетесь на порядок массива (который очень нестабилен) для того, чтобы что-то работало так, как вы этого хотите, то, вероятно, это не то, что вы хотите делать. Если кто-то зайдет, не знаю, и добавит новый элемент в массив не в то место, он сломает все приложение.
Я понимаю! это имеет смысл с точки зрения повторного использования и масштабируемости. Тратить твое время!
Идентификатор пути Parma не ограничен числом. Он будет соответствовать всему, что не содержит /. Если вы хотите сопоставить только число, используйте сопоставитель с пользовательской логикой. Но я бы посоветовал использовать префикс типа
profile/:profileID