Question

我有一个Angular应用程序。

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

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

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

为何Angular路由器会调用错误的组件和路由的ngOnInit？

3 个答案: