Angular中路由功能不正确

Question

当尝试像这样从'users'导航到'users/:id'时

this.router.navigate([`/users/${userId}`]);

或

this.router.navigate(['/users', userId]);

它保持在'users'，但浏览器栏中的url更改为'users/{correct_id}'

应用程序结构:

• 仪表板(/)
• 登录(/登录)
• 用户(或用户)
  • 用户/id(/用户:id)

我怀疑问题出在我的路线上，但不幸的是我找不到它。

app-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: ''
}

);

users-routing.module.ts:

const routes: Routes = [
{
path: '',
component: UsersComponent,
},
{
path: ':id',
component: UserProfileComponent,
},

);

Answer 1

有两个问题，

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 -然后你还需要更改用户模块路由，如

users-routing.module.ts:

const routes: Routes = [{
path: '',
children: [{
path: '',
component: UsersComponent,
}, {
path: ':id',
component: UserProfileComponent
}]
}];

希望你清楚这个解决方案

Answer 2

问题可能在以下路线:

{
path: 'users',
component: UsersComponent, // <-- HERE
loadChildren: (): Promise<LoginModule> =>
import('./users/users.module').then(
(m: typeof import('./users/users.module')): UsersModule => m.UsersModule)
},

当你把一个组件分配给一个路由时，当那个路由匹配时，这个组件总是会被渲染。如果它有孩子，他们将被渲染在UserComponent模板的<router-outlet>。

因为你也有UserComponent分配给子根路径，我想这不是情况。

要解决这个问题，只需要从'users'路由中移除组件线。

{
path: 'users',
loadChildren: (): Promise<LoginModule> =>
import('./users/users.module').then(
(m: typeof import('./users/users.module')): UsersModule => m.UsersModule)
},

欢呼

Answer 3

第一次尝试

this.router.navigate([`${userId}`]);

您正在尝试基于相对路径进行路由，但您没有提供相对当前路径路由所需的relativeTo属性

第二次尝试

this.router.navigate([`${users/userId}`]);

你有几个问题:

1. 如果不以'/'开始导航，路由器会认为你是在相对于当前路由进行导航，但事实并非如此。

2. 你的路由字符串模板是错误的(你试图使用变量users/userId这显然不是你的意思)，你应该把它改成:

   this.router。['/users'，${userId}]);

Answer 4

您应该删除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
)
},
...
];