lazy-loading - 具有子组件默认路由的 Angular 延迟加载模块

Question

Angular 9。子组件未使用延迟加载的模块组件进行加载。这是我的代码。

app-routing.module.ts

  {
    path: '',
    redirectTo: '/auth',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadChildren: () => import('./pages/auth/auth.module').then(m => m.AuthModule),
  }

auth.module.ts

  {
    path: '',
    component: AuthRootComponent,
    children: [
      { path: 'login', component: LoginComponent},
      { path: 'forgot', component: ForgotPasswordComponent},
      { path: '', redirectTo: 'login', pathMatch: 'full' },
    ]
  }

当我使用localhost:4200/时，它会将我重定向到localhose:4200/auth。它不加载登录组件。

但是当我在浏览器中点击网址(localhost:4200/auth)时，它将加载登录组件，新的网址将是所需的网址，即 localhost:4200/auth/login.

请告诉我，当加载 auth 模块并且 url 为 localhost:4200 时，为什么它不从子数组加载登录名？ URL 应该是 localhost:4200/auth/login 但现在获取 url localhost:4200/auth

Answer 1

我认为您必须将 redirectTo: '/auth' 更改为 redirectTo: 'auth'。这是因为当您使用绝对重定向(例如 /auth)时，仅允许一个重定向操作，在本例中是转到 /的重定向操作auth，这意味着任何其他重定向(例如 redirectTo: 'login')都将被忽略。

Here's它检查是否有任何绝对重定向:

if (allowRedirects && this.allowRedirects) {
    return this.expandSegmentAgainstRouteUsingRedirect(
      ngModule, segmentGroup, routes, route, paths, outlet);
}

和here它指出在绝对重定向之后，不能有任何其他重定向:

if (e instanceof AbsoluteRedirect) {
  // after an absolute redirect we do not apply any more redirects!
  this.allowRedirects = false;
  // we need to run matching, so we can fetch all lazy-loaded modules
  return this.match(e.urlTree);
}

---

绝对重定向与相对重定向

摘 self 的 GH repo 。

redirectTo: 'foo/bar' 和 redirectTo: '/foo/bar' 之间的区别在于:

• /- 将从根开始(第一个最外层的路线数组)
• `` - 将从当前路由所在数组的第一条路由开始搜索