怎样才能以角度宣布好的路线？

Question

我使用的是角，我想尝试使用多个子模块的延迟加载，我得到了错误的错误:无法匹配任何路由。网址段：‘home/user/profile’

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

APP模块

{
    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,
  },

这是回购，如果你需要看到其他东西，

Answer 1

我不认为有任何必要使用命名的插座，你是复杂的事情为自己。让我们保持简单，所以我从您的<router-outlet>中删除了“子”，也从您的路由中删除了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

欢迎亚历约尔。

很可能您需要删除这一行

component: HomeComponent,

您需要使用component或loadChildren，但不能同时使用。您可以将HomeComponent作为空路径放置在主路由模块中。不要忘记pathMatch: 'full' on --所有的都是空路径。