我如何在 angular 中声明好的路线？

Question

我使用 angular 并想尝试延迟加载多个模块，但我收到此错误错误：无法匹配任何路由。 URL 段：'home/users/profile'

好吧，我花了很长时间试图解决这个问题，但我没有找到答案

应用模块

{
    path: 'home',
    component: HomeComponent,
    loadChildren: () =>
      import('./components/home/home.module').then((m) => m.HomeModule),
  },
  {
    path: 'auth',
    loadChildren: () =>
      import('./components/auth/auth.module').then((m) => m.AuthModule),
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'home',
  },

家庭路由模块

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

用户路由模块

 {
    path: '',
    outlet: 'child',
    component: UsersComponent,
  },
  {
    path: 'user/:id',
    outlet: 'child',
    component: UserComponent,
  },
  {
    path: 'profile',
    outlet: 'child',
    component: ProfileComponent,
  },

如果您需要查看其他内容，这是回购协议https://github.com/ginebras/user-system

Answer 1

我认为没有必要使用命名网点，您正在为自己复杂化事情。 让我们保持简单，所以我从您的<router-outlet>中删除了 'child' 并从您的路线中删除了outlet: child 。

我在user-routing.module中更新了您的用户路由，它应该如下所示：

  RouterModule.forChild([
      {
        path: '',
        component: UsersComponent,
        pathMatch: 'full',
      },
      { path: 'profile', component: ProfileComponent },
      {
        path: 'user-detail/:id',
        component: UserComponent,
      },
    ]),
  ],

为了便于阅读，我还将user:/id路径更改为user-detail:id 。 您可以将其改回或从打开user:/id的位置更改为user-detail:id 。

我也更新了 stackblitz，看看： https://stackblitz.com/edit/angular-ivy-rmxi8g ？

Answer 2

欢迎 Alejø。

您很可能需要删除此行

component: HomeComponent,

您需要使用component或loadChildren但不能同时使用两者。 您可以将HomeComponent作为空路径放在 home 路由模块中。 不要忘记所有空路径上pathMatch: 'full' 。