Некорректное функционирование маршрутов в Angular
При попытке перейти от «пользователей» к «пользователям /: id», как это
this.router.navigate([`/users/${userId}`]);
или
this.router.navigate(['/users', userId]);
он остается на «пользователях», но URL-адрес в панели браузера меняется на «users/{correct_id}»
Структура приложения:
- панель приборов (/)
- логин (/логин)
- пользователи (/пользователи)
- пользователи/идентификатор (/пользователи:идентификатор)
Подозреваю, что проблема в моих маршрутах, но, к сожалению, не могу найти.
приложение-routing.module.ts:
const routes: Routes = [
{
path: '',
component: DashboardComponent,
loadChildren: (): Promise<DashboardModule> =>
import('./dashboard/dashboard.module').then(
(m: typeof import('./dashboard/dashboard.module')): DashboardModule => m.DashboardModule
)
},
{
path: 'login',
component: LoginComponent,
loadChildren: (): Promise<LoginModule> =>
import('./login/login.module').then(
(m: typeof import('./login/login.module')): LoginModule => m.LoginModule
)
},
{
path: 'users',
component: UsersComponent,
loadChildren: (): Promise<LoginModule> =>
import('./users/users.module').then(
(m: typeof import('./users/users.module')): UsersModule => m.UsersModule
)
},
{
path: '**',
redirectTo: ''
}
];
пользователи-routing.module.ts:
const routes: Routes = [
{
path: '',
component: UsersComponent,
},
{
path: ':id',
component: UserProfileComponent,
},
];
Ответы 4
в вашей первой попытке,
this.router.navigate([`${userId}`]);
вы пытаетесь маршрутизировать на основе относительного пути, но не предоставляете свойство relativeTo, которое необходимо для маршрутизации относительно текущего пути.
со второй попытки,
this.router.navigate([`${users/userId}`]);
у вас есть несколько вопросов:
не начиная навигацию с помощью '/' маршрутизатор думает, что вы пытаетесь перейти к текущему маршруту, что не так.
ваш шаблон строки маршрута неверен (вы пытаетесь использовать переменную
users/userId, что явно не то, что вы имели в виду), вы должны изменить его на:this.router.navigate(['/users',
${userId}]);
Вы должны удалить настройку компонента в массиве routes.
const routes: Routes = [
...
{
path: 'users',
// component: UsersComponent, << remove this line
loadChildren: (): Promise<LoginModule> =>
import('./users/users.module').then(
(m: typeof import('./users/users.module')): UsersModule => m.UsersModule
)
},
...
];
Проблема, вероятно, в следующем маршруте:
{
path: 'users',
component: UsersComponent, // <-- HERE
loadChildren: (): Promise<LoginModule> =>
import('./users/users.module').then(
(m: typeof import('./users/users.module')): UsersModule => m.UsersModule)
},
Когда вы назначаете компонент маршруту, когда этот маршрут совпадает, этот компонент всегда будет отображаться. И если у него есть дети, они будут отображаться в <router-outlet> этого UserComponent шаблона.
Поскольку у вас также есть UserComponent назначение корневого пути дочерних элементов, я думаю, это не так.
Чтобы решить эту проблему, вам просто нужно удалить строку компонента из маршрута 'users'.
{
path: 'users',
loadChildren: (): Promise<LoginModule> =>
import('./users/users.module').then(
(m: typeof import('./users/users.module')): UsersModule => m.UsersModule)
},
Ваше здоровье
Спасибо за разъяснение и решение! Действительно, достаточно было удалить эту строку, и навигация заработала корректно.
Есть две проблемы,
1-й — вы использовали функцию ленивой загрузки, поэтому вам не нужно загружать компонент в основной маршрут.
{
path: 'users',
component: UsersComponent, // <-- REMOVE it
loadChildren: (): Promise<LoginModule> =>
import('./users/users.module').then(
(m: typeof import('./users/users.module')): UsersModule => m.UsersModule
)
},
2-й - тогда вам также нужно изменить маршрут пользовательского модуля, например,
пользователи-routing.module.ts:
const routes: Routes = [{
path: '',
children: [{
path: '',
component: UsersComponent,
}, {
path: ':id',
component: UserProfileComponent
}]
}];
Надеюсь, вы разобрались с этим решением
Спасибо, что указали на проблемы, к сожалению, после их исправления проблема не исчезла, но, несмотря на изменение URL-адреса на правильный вид, он не появляется.