如何解决重载路线未显示组件
我有一个项目,该项目的路由模块具有以下路径:
{ path: 'account-settings',component: AccountSettingsComponent,canActivate: [LearningRedirectGuard],children: [
{ path: '',redirectTo: 'account',pathMatch: 'full'},{ path: 'account',component: AccountComponent,data: { menuType: 'learning' }},{ path: 'password',component: PasswordComponent,{ path: 'notifications',component: NotificationsComponent,{ path: 'preferences',component: PreferencesComponent,{ path: 'security',component: SecurityComponent,]
}
这个项目被导入到另一个更大的项目中
{
path: 'learning',loadChildren: './../../projects/pxLearning/src/app/app.module#LearningModule',},
当我尝试访问此路线时(通过单击带有[routerLink]="['/learning/account-settings/account']"
的按钮)
/learning/account-settings/account
AccountComponent(或其他帐户)运行正常
但是,如果我尝试刷新页面,则相同的路由不会实例化AccountComponent(或其他)。发生相同的事情是,我在浏览器中键入url,不会实例化组件。
为什么会这样?
编辑: LearningGuard
canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if (state.url.indexOf('learning') === -1) {
this.router.navigate(['/learning/' + state.url]);
}
return true;
}
解决方法
if (state.url.indexOf('learning') === -1) {
您可以将此行重写为
if (!state.url.contain('learning')) {
因此,当您现在不在学习路线上时,请始终进行导航。这意味着您将被重定向到另一条路由,该路由甚至可能根本不存在,并且您的路由与任何组件都不匹配。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。