Angular - 延迟加载后在孩子中定义父路由答案

【问题标题】：Angular - define parent route in child after lazy loadingAngular - 延迟加载后在孩子中定义父路由
【发布时间】：2023-03-11 08:52:02
【问题描述】：

延迟加载后如何从子组件定义父路由？

例如：

app-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];

user-routing.module.ts

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: '../register', component: RegisterComponent },
  { path: '../reset', component: ResetPasswordComponent },
  { path: '../verify', component: VerifyComponent, canActivate: [AuthGuard] }
];

显然“../”不起作用，但我希望路径“/register”、“/reset”和“/verify”...成为根路径。但是，我仍然想延迟加载用户模块，以便一次加载所有内容，我只是不希望我的路由器位于另一个文件夹或子路由中，例如“/user”或“/login”。

【问题讨论】：

'../register' 这对你不起作用，而是尝试这个'注册'。其次，为什么需要在单独的文件中定义用户路由，放在同一个文件应用程序路由模块中。
有什么具体原因吗？为什么要同时加载“/register”、“/reset”和“/verify”？
@MuhammadAftab 显然它不会像我说的那样工作。这样我就可以单独加载模块。我可以在一个文件中定义它们，但我只能加载一次模块，除非你知道一种预先定义路由而不加载模块的方法。
@Ravin 它们只是示例，但我不希望它们看起来像在子目录中。

标签： angular typescript angular8

【解决方案1】：

由于注册，验证组件不在应用模块中，因此必须将模块名称放在 url 中，以便 angular 从该特定模块加载组件。

为了满足您的要求，最初您可以使用正确的路径从该模块加载组件，然后您可以更改地址栏中的 url，无需导航。

您可以使用 location.go(url) 这将基本上更改您的 url，而不会更改应用程序的路线。

请参阅此answer 了解更多信息。

【讨论】：

这不是定义路线，而是另一种可能的黑客攻击。它也不允许我将路线保留在其他模板中。