Angular 中的路由功能不正确

Question

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

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

或

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

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

应用结构：

仪表板 (/)
登录（/登录）
用户（/用户）
- users/id (/用户: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,
},

];

Answer 1

在你的第一次尝试中，

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

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

在你的第二次尝试中，

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

你有几个问题：

如果不使用“/”开始导航，路由器会认为您正在尝试相对于当前路线导航，但事实并非如此。
你的路由字符串模板是错误的（你试图使用变量 users/userId 这显然不是你的意思），你应该将其更改为：

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

Answer 2

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

Answer 3

问题可能出在以下路线：

{
  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 4

有两个问题，

1st - 你已经使用了延迟加载功能，所以你不需要在主路由中加载组件

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

2nd - 然后你还需要改变用户模块路由，比如，

users-routing.module.ts:

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

希望您对这个解决方案有所了解

Angular 中的路由功能不正确

Incorrect functioning of routes in Angular

angular

typescript

angular2-routing