在 angular 路由中混合组件和模块

Question

我正在开发旧版 angular 应用程序，并慢慢将其升级到 ng v9。目前，我有这样一个路由配置，它只加载组件，但想从现在开始过渡到模块。

这是我当前的路由文件的样子

const routes = [
  {path: 'home', component: HomeComponent, canActivate:[routeGuard]},
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'settings', loadChildren: () => import('path_to_import').then(mod => mod.SettingsModule)}
]

从我尝试导航的组件中，它就像这样 -

<span routerLink="settings"></span>

奇怪的是，当我点击页面上的设置时，它会将我重定向到“/settings/home”，这不是预期的行为。

但是当我像这样更改要作为组件加载的模块时 -

const routes = [
  {path: 'home', component: HomeComponent, canActivate:[routeGuard]},
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'settings', component: SettingsComponent}
]

效果很好。所以我不确定为什么加载模块在这里有所不同。

感谢任何帮助！

Answer 1

您还需要为您的设置模块设置路由。这将决定项目的进一步路线。

而不是像您提到的那样加载模块，尝试添加以下行来加载模块 settings.

const routes = [
{path: 'home', component: HomeComponent, canActivate:[routeGuard]},
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'settings', loadChildren: './settings/settings.module#SettingsModule'}
]

我不知道你设置模块的路径。请按照您的路径进行更正。并为设置模块定义路由文件。

在 angular 路由中混合组件和模块

Mixing components and modules in angular routing

angular-routing

angular

angular-routerlink