angular - 在路由器插座中呈现的 Angular 7 重复组件
问题描述
这只发生在某些时候(通常在早上打开应用程序之后)。
我们正在使用 SwUpdate 来更新应用程序,这种行为似乎与更新时间一致。结果 html 如下所示:
<app-root _nghost-vrt-c0="" ng-version="7.2.15">
<router-outlet _ngcontent-vrt-c0=""></router-outlet>
<app-layout _nghost-vrt-c4="">
<div _ngcontent-vrt-c4="" class="app-class">
<router-outlet _ngcontent-vrt-c4=""></router-outlet>
<app-component-1 _nghost-vrt-c7="">
</app-component-1>
<app-component-1 _nghost-vrt-c7="">
</app-component-1>
</div>
</app-layout>
</app-root>
问题是重复的 app-component-1。在正常情况下,它只渲染一次。我无法找到解决方案,甚至无法找到描述此问题的问题。感谢任何帮助。
相关路由规则:
const routes: Routes = [
{
path: '',
component: Layout,
canActivate: [AuthGuard],
children: [
{ path: 'home', loadChildren: './home/home.module#HomeModule'},
{ path: 'otherRoute', loadChildren: './otherRoute/otherRoute.module#OtherRouteModule'},
{ path: '', redirectTo: 'home', pathMatch: 'full' },
]
}
{ path: 'under-construction', component: UnderConstructionComponent, data: { title: 'Under Construction' } },
{ path: '**', redirectTo: 'under-construction' },
]
这是布局模板:
<div class="tm-app">
<div >
<app-menu></app-menu>
<div>
<div>
<app-top-bar></app-top-bar>
</div>
<router-outlet></router-outlet>
</div>
</div>
我尽可能多地从布局和输出中清理,以保证代码库的安全。我正在编辑这个问题来解决它。因为我还没有找到解决办法。这个可以吗?
解决方案
在我的特殊情况下,问题与实现路由保护有关CanActivate
。当守卫返回false
时,路由无法激活(但它已经创建)。如果同时防护也重定向到另一个路由,则创建一个重复的路由器出口组件。
解决方案:不要从 route guard 重定向CanActivate
。只返回真或假。替代解决方案:从CanActivate
守卫重定向并始终返回 true(在守卫中重定向时)。
可以从守卫返回替代路由,这是比始终返回 true 更好的解决方案。
推荐阅读
- java - 单击后退按钮时滑动加载的图像重置
- laravel - 如何验证来自数据库和请求输入的规则比较
- php - 如何正确设置站点的页面路由?
- xcode - 如何在 Xamarin Forms 中集成 Apple Pay?
- parse-platform - 在指针列上应用搜索时面临问题 - Parse Opensource - Cloud Function
- javascript - 如何使用 JavaScript 自动更改/切换页脚的背景颜色
- c# - 将 ASP.NET Core MVC 应用程序集成到现有的 ASP.NET MVC 应用程序
- javascript - 填充对象的嵌套数组 mongoose
- django - 错误消息中的 Django Formset 字段标签
- vuejs2 - 使用 vee-validate 进行自定义验证