Angular 8 -条件路由定义

Question

需要为两个不同的路由加载相同的组件。

1. (较老的APP)第一条路由(landing)属于混合应用，Angular应用或组件被嵌入到某个CMS应用中(通过放置组件选择器)。
2. (新转换)另一条路线(app/sub/landing)将加载相同的组件，但路线不同

解释我引入了一个sessionStorage变量，通过在CMS应用中添加下面的代码来检查加载的应用是否为Hybrid。

let isHybridRouteCheck = !!sessionStorage.getItem('isHybrid');

所以如果组件是通过/in CMS应用程序加载的，那么它将显示isHybrid: true。

在纯Angular应用程序的情况下，它不会得到isHybrid，所以值将是false(而不是null，由于!!)

<<p>

定义路线/strong>混合线路

const HYBRID_Routes: Routes = [
{ path: 'landing', component: LandingComponent }
...
];

<<p>角路线/em>

const PURENG_Routes: Routes = [
{
path: 'parent/org/companyname',
redirectTo: 'parent/org/companyname/landing',
pathMatch: 'full'
},
{
path: 'parent/org/companyname/landing',
component: LandingComponent
}
]

App Module TS

是否可以将路由传递到RouterModule，如下面的代码?

对于我来说，下面的代码在isFwbHybridRouteCheck的false值的情况下抛出了没有匹配路由的错误。它会考虑PURENG_Routes。不是吗?

@NgModule({
imports: [
RouterModule.forRoot(isHybridRouteCheck ? HYBRID_Routes: PURENG_Routes, { useHash: true })
]
});

Answer 1

解决方案很简单:)当您从localStorage获得值时，它是一个字符串值，所以当您尝试将其转换为布尔值等于true总是。Boolean('true') === true, Boolean('false') === true也。尝试:const isHybrid = localStorage.getItem('isHybrid') === 'true';