时间戳

首页 > 解决方案 > Angular-routing：html-template 中的路由链接无法与路由模块中定义的路由匹配

angular - Angular-routing：html-template 中的路由链接无法与路由模块中定义的路由匹配

问题描述

我有一个关于路由的问题（模块内有多个路由，延迟加载）。

假设我有 2 个模块

1-app.routing.module.ts 2-user.management.routing.module.ts

在应用程序路由模块文件中，我有

const appRoutes: Routes = [
 { path: '', redirectTo: '/login', pathMatch: 'full' },
 { path: 'login',  loadChildren: () => import('../app/user.management/user.management.module')
 .then(m => m.UserManagementModule) }
]
 
@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModules {}

和里面的用户管理路由模块文件

const userManagementRouting: Routes = [
 { path: '', component: LoginComponent },
 { path: 'forgot-password', component: ForgotPasswordComponent }
];
 
@NgModule({
 imports: [RouterModule.forChild(userManagementRouting)],
 exports: [RouterModule]
})
export class UserManagementRoutingModule { }

当我使用“ng serve”运行应用程序时，它按预期工作。我添加了一个链接，例如

<a class="btn btn-link" routerLink="/forgot-password">Forgot Password </a>

当我点击忘记密码链接时，应用程序抛出错误

"Error: Uncaught (in promise): Error: cannot match any routes. URL segment: 'forgot-password'"
"Cannot match any routes. URL segment: 'forgot password"

你能在这里指导我我的代码有什么问题吗？

标签： angularangular-routerangular-routerlinkangular-route-segment

解决方案

如果 R. Richards 的建议不起作用，请尝试

routerLink=['/forgot-password']

或者

routerLink=['/login/forgot-password']

请注意，您使用的是相对路径。那么这个 Html 模板在哪里呢？

您也可以使用绝对路径。

如果不成功，请告诉我们。保重，祝你好运。

推荐阅读