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

Question

我有一个 Angular 申请。

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

我做了一些调查，发现我的一个组件（路由：invoices，组件：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

显示我改成route imprint，但是ngOnInit调用的其他组件的route(invoices)没有出现

我的路线如下，我看不出有什么明显的错误：

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

终于查明问题出在一个订阅没有被释放的问题上。

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

Why does Angular router call ngOnInit of wrong component and route?

angular

angular-router