我使用 NgRx
来管理我的表单状态,所有数据操作和导航都由副作用处理 .
问题:
如果我在儿童路线上,并希望导航到与另一个参数相同的路线,我会收到以下错误,
Uncaught(承诺):TypeError:无法读取null的属性'component'TypeError:无法读取null的属性'component'
例如,我有这条路线,
https://www.artngcore.com:4200/dbapp/registry/patientregistration/edit/1111
如果我尝试导航到edit / id = 3333,我会收到错误,
https://www.artngcore.com:4200/dbapp/registry/patientregistration/edit/333
当前的解决方法:
现在我通过从 edit/id
路线导航到 new
路线来处理它,然后重新导航到具有不同身份的 edit/id
,
https://www.artngcore.com:4200/dbapp/registry/patientregistration/edit/1111
https://www.artngcore.com:4200/dbapp/registry/patientregistration/new
https://www.artngcore.com:4200/dbapp/registry/patientregistration/edit/333
我发布相关代码,
这是我的路由器模块,
const routes: Routes = [
{
path: '',
component: RegistryOutletComponent,
children: [
{ path: '', component: DashboardComponent },
{ path: 'patientregistration', redirectTo: 'patientregistration/new' },
{
path: 'patientregistration',
component: PatientRegistrationFormComponent,
canDeactivate: [CanDeactivateGuard],
children: [
{
path: 'new',
component: PatientRegistrationFormComponent,
resolve: { route: PatientRegistryResolver },
data: { expectedRole: { roles: ['reg'] } },
},
{
path: 'edit/:id',
component: PatientRegistrationFormComponent,
resolve: { route: PatientRegistryResolver },
data: { expectedRole: { roles: ['reg'] } },
},
],
},
],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class RegistryRoutingModule {}
我使用相同的组件 PatientRegistrationFormComponent
来处理新的和编辑例程,
我用一个解析器 PatientRegistryResolver
,
export class PatientRegistryResolver implements Resolve<any> {
constructor(private store: Store<fromRegistry.IRegistryState>) {}
resolve(
route: ActivatedRouteSnapshot,
_state: RouterStateSnapshot
): Observable<any> | Promise<any> | any {
switch (route.routeConfig.path) {
case 'new':
return this.store.dispatch(new patientRegActions.ResetStore());
case 'edit/:id':
return this.store.dispatch(
new patientRegActions.TryGetPatient(+route.params['id'])
);
}
return;
}
}
最后我的副作用,
@Effect({ dispatch: false })
$onNavigateToPatientId: Observable<Action> = this.actions$
.ofType(ptRegActions.NAVIGATE_TO_PATIENT_ID)
.map(toPayload)
.do((payloadData: ISearchModalPayload | any) => {
if (typeof payloadData !== 'object') {
this.router.navigate(['/dbapp/registry/patientregistration/edit', payloadData]);
} else {
this.router.navigate([
'/dbapp/registry/patientregistration/edit',
payloadData.searchPayload[0].patientFileId,
]);
}
});
How can I navigate within the same child using a different id?