以角度路由时丢失url答案

【问题标题】：Losing url when routing in angular以角度路由时丢失url
【发布时间】：2021-10-11 13:59:42
【问题描述】：

我在某些项目中遇到角度路由问题。

这是某个组件的功能。订阅 currentCounter$ 流并从中获取价值后，我需要将其传递给路由器，这会将我带到另一个组件。

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。

有些东西正在重置路线，因为有一段时间我在地址栏上看到正确的网址，然后它消失了，我最终得到了这个网址http://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 {}

我知道有两个相同的懒惰模块，但我不知道如何做不同的。这就是这个项目的编写方式。如果我可以在这个片段中添加另一个孩子，那就完美了：

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

children: [...]
      },

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

【问题讨论】：

标签： angular routes

【解决方案1】：

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

【讨论】：