在angular中路由时丢失url

Question

我在某个项目中遇到了点问题。

这是某个组件的函数。订阅currentCounter$ stream并从中获取值后，我需要将其传递给router，这将带我到另一个组件。

onEditAutomaticCounter() {
this.isAutomaticCounterEditing = true;
this.counterSubscription = this.currentCounter$.pipe(take(1)).subscribe((currentCounter) => {
console.log(currentCounter);
this.router.navigate(['search', 'AutomaticCounter', currentCounter.Id], {
relativeTo: this.route,
queryParams: { currentCounterId: currentCounter.Id },
});
});
}

路由从那里捕获在这里，一切工作，但我失去了URL地址，我需要有在导航结束，因为有一定的ID，我将不得不使用以后。

某些东西正在重置路由，因为有一刻我在地址栏上看到正确的url，然后它消失了，我最终得到这个urlhttp://localhost:4200/#/search，我需要http://localhost:4200/#/search/AutomaticCounters/params=.....

export const routes: Routes = [
{
path: '',
component: MainComponent,
canActivate: [AuthGuard],
data: { key: '' },
children: [
{ path: '', redirectTo: 'search', pathMatch: 'full' },
{ path: 'main', redirectTo: 'search', pathMatch: 'full' },
{
path: 'search',
loadChildren: () => import('./modules/main/main.module').then((m) => m.MainModule),
},
{
path: 'search/AutomaticCounter/:id',
loadChildren: () => import('./modules/main/main.module').then((m) => m.MainModule),
},
{ path: 'watchers', loadChildren: () => import('./modules/watchers/watchers.module').then((m) => m.WatchersModule) },
{ path: 'counters', loadChildren: () => import('./modules/counters/counters.module').then((m) => m.CountersModule) },
{ path: 'management', loadChildren: () => import('./modules/management/management.module').then((m) => m.ManagementModule) },
],
},
{ path: 'login', component: LoginComponent, data: { key: 'login' } },
{ path: '', redirectTo: 'login', pathMatch: 'full' }, // ustawiamy login jako startowy, żeby załadowały się style mpcore
{ path: '**', redirectTo: 'login' },
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
useHash: true,
enableTracing: false,
}),
StoreModule.forFeature(ROUTER_FEATURE_KEY, routerReducer),
StoreRouterConnectingModule.forRoot({
stateKey: ROUTER_FEATURE_KEY,
routerState: RouterState.Minimal,
serializer: CustomRouterSerializer,
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}

我知道有两个相同的Lazy模块，但我不知道如何做到不同。这就是这个项目的写作方式。如果我能在这个片段中添加另一个孩子，那就太好了:

{
path: 'search',
loadChildren: () => import('./modules/main/main.module').then((m) => m.MainModule),
children: [...]
},

但是这样的事情是行不通的。有什么想法吗?

Answer 1

问题解决。在ngOnInit钩子中还有一个this.router.navigate(['/search'])导致url再次更改。