为什么Angular路由器调用错误组件和路由的ngOnInit？

Question

我有一个 Angular 应用程序。

我认识到一个页面的一些网络请求也在所有其他页面上执行。

我做了一些调查，发现我的一个组件（路由：发票，组件：RechnungenComponent）的ngOnInit 方法也在其他页面上被调用，没有任何明显的原因。

我激活了路由器跟踪，显示如下：

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

那是因为这个通配符路由

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

由于该条目，在所有路由中始终启动该组件 https://angular.io/api/router/Route#wild-cards（据此）

删除该条目，它会解决您的问题

Answer 2

尝试添加pathMatch: full:

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

Answer 3

最后我发现问题是由于订阅未发布引起的。