我使用 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?