Почему Angular-маршрутизатор вызывает ngOnInit не того компонента и маршрута?

Question

У меня есть приложение Angular.

Я узнал, что некоторые сетевые запросы одной страницы выполняются и на всех других страницах.

Я провел некоторое исследование и обнаружил, что метод ngOnInitодного из моих компонентов (route: invoices, component: RechnungenComponent) тоже вызывается на каждой странице без какой-либо очевидной причины.

Я активировал трассировку маршрутизатора, которая показывает следующее:

Router Event: NavigationStart vendor.js:134357:37
Router Event: RoutesRecognized vendor.js:134357:37
Router Event: GuardsCheckStart vendor.js:134357:37
GuardsCheckStart(id: 10, url: '/imprint', urlAfterRedirects: '/imprint', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'imprint', path:'imprint') }  } ) vendor.js:134352:35
Object { id: 10, url: "/imprint", urlAfterRedirects: "/imprint", state: {…} }
vendor.js:134352:35
Router Event: ChildActivationStart vendor.js:134357:37
ChildActivationStart(path: '') vendor.js:134352:35
Object { snapshot: {…} }
vendor.js:134352:35
Router Event: ActivationStart vendor.js:134357:37
ActivationStart(path: 'imprint') vendor.js:134352:35
Object { snapshot: {…} }
vendor.js:134352:35
Router Event: GuardsCheckEnd vendor.js:134357:37
GuardsCheckEnd(id: 10, url: '/imprint', urlAfterRedirects: '/imprint', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'imprint', path:'imprint') }  } , shouldActivate: true) vendor.js:134352:35
Object { id: 10, url: "/imprint", urlAfterRedirects: "/imprint", state: {…}, shouldActivate: true }
vendor.js:134352:35
Router Event: ResolveStart vendor.js:134357:37
ResolveStart(id: 10, url: '/imprint', urlAfterRedirects: '/imprint', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'imprint', path:'imprint') }  } ) vendor.js:134352:35
Object { id: 10, url: "/imprint", urlAfterRedirects: "/imprint", state: {…} }
vendor.js:134352:35
Router Event: ResolveEnd vendor.js:134357:37
ResolveEnd(id: 10, url: '/imprint', urlAfterRedirects: '/imprint', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'imprint', path:'imprint') }  } ) vendor.js:134352:35
Object { id: 10, url: "/imprint", urlAfterRedirects: "/imprint", state: {…} }
vendor.js:134352:35
Router Event: ActivationEnd vendor.js:134357:37
ActivationEnd(path: 'imprint') vendor.js:134352:35
Object { snapshot: {…} }
vendor.js:134352:35
Router Event: ChildActivationEnd vendor.js:134357:37
ChildActivationEnd(path: '') vendor.js:134352:35
Object { snapshot: {…} }
vendor.js:134352:35
Router Event: ActivationEnd vendor.js:134357:37
ActivationEnd(path: '') vendor.js:134352:35
Object { snapshot: {…} }
vendor.js:134352:35
Router Event: ChildActivationEnd vendor.js:134357:37
ChildActivationEnd(path: '') vendor.js:134352:35
{…}
​
snapshot: Object { url: [], outlet: "primary", _lastPathIndex: -1, … }
​
<prototype>: Object { toString: toString()
, … }
vendor.js:134352:35
Router Event: NavigationEnd vendor.js:134357:37
NavigationEnd(id: 10, url: '/imprint', urlAfterRedirects: '/imprint') vendor.js:134352:35
Object { id: 10, url: "/imprint", urlAfterRedirects: "/imprint" }
vendor.js:134352:35
Router Event: Scroll vendor.js:134357:37
Scroll(anchor: 'null', position: 'null') vendor.js:134352:35
Object { routerEvent: {…}, position: null, anchor: null }
vendor.js:134352:35

Это показывает, что я изменился на отпечаток маршрута, однако маршрут другого компонента (счета-фактуры), чьи вызовы ngOnInit не вызваны, не встречается там.

Мои маршруты выглядят следующим образом, и я не вижу здесь никакой очевидной ошибки:

export const appRoutes: Routes = [
  {
    path: 'login',
    component: SplashScreenComponent,
    canActivate: [UnauthGuard]
  },
  {
    path: 'signup',
    component: SplashScreenComponent,
    canActivate: [UnauthGuard]
  },
  {
    path: 'logout',
    component: LogoutComponent
  },
  {
    path: 'buy',
    component: BuyWizardComponent,
    resolve: { steuerberater: SteuerberaterResolver }
  },
  {
    path: '',
    component: ShellComponent,
    canActivate: [AuthGuard],
    resolve: {
      store: StoreResolver,
      belegkreise: BelegkreisResolver
    },
    children: [
      {
        path: 'invoices',
        component: RechnungenComponent
      },
      {
        path: 'invoices/new',
        component: KategorieSelectComponent
      },
      {
        path: 'invoices/:id',
        component: RechnungComponent,
        canDeactivate: [CanDeactivateGuard],
        resolve: { data: RechnungResolver }
      },
      {
        path: 'mobile/preview',
        component: MobilePreviewComponent
      },
      {
        path: 'mobile/crop',
        component: MobileCropComponent
      },
      {
        path: 'mobile/new',
        component: MobileCameraComponent,
        canDeactivate: [CanDeactivateGuard]
      },
      {
        path: 'categories',
        component: KategorienComponent
      },
      {
        path: 'vendors',
        component: LieferantenComponent
      },
      {
        path: 'uploads',
        component: UploadListComponent
      },
      {
        path: 'settings',
        component: SettingsComponent
      },
      {
        path: 'imprint',
        component: ImprintComponent
      },
      {
        path: 'statistics',
        component: StatisticsComponent
      },
      {
        path: 'help',
        component: HelpComponent
      },
      {
        path: '',
        redirectTo: 'invoices',
        pathMatch: 'full'
      },
      {
        path: '**',
        redirectTo: 'invoices',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }
];

Видите ли вы здесь явную неправильную конфигурацию?Есть ли у вас какие-либо другие идеи о причинах такого поведения?

Answer 1

Попробуйте добавить pathMatch: full:

  {
    path: '',
    pathMatch: 'full',
    component: ShellComponent,
    canActivate: [AuthGuard],
    resolve: {
      store: StoreResolver,
      belegkreise: BelegkreisResolver
    },
    children: [
```

Answer 2

Это из-за этого подстановочного маршрута

{
    path: '**',
    redirectTo: 'invoices',
    pathMatch: 'full'
}

из-за этой записи, во всех маршрутах этот компонент всегда инициируется https://angular.io/api/router/Route#wild-cards (в соответствии с этим)

удалить этозапись, и это решит вашу проблему

Answer 3

Наконец, я обнаружил, что проблема была вызвана подпиской, которая не была выпущена.