在 router.navigate 之后没有调用 ngOnInit [英] ngOnInit not being called after router.navigate

问题描述

我的 Angular 应用程序在 router.navigation() 之后突然没有调用 ngOnInit() 这意味着我的组件没有正确加载.我认为这可能是由于我做了一些更改，但恢复更改并没有解决问题.

My Angular app is all of a sudden not calling ngOnInit() after router.navigation() which means my components do not load correctly. I thought it may have been due to some changes I made but reverting the changes did not resolve the issue.

正常导航导致组件无法正确加载的示例；此页面由以下代码清单导航:this.router.navigate(['/result', this.params.data._id]);:

Example where normal navigation causes component not to load correctly; This page is navigated to by the following code listing: this.router.navigate(['/result', this.params.data._id]);:

重新加载页面，组件加载正确:

Reloading the page, the component is loaded correctly:

这是我的一些代码清单，

Here are some of my code listings,

app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    AgGridModule.withComponents(
            [SampleResultButtonComponent]
        ),
    ChartsModule
  ],
  declarations: [
    AppComponent,

    LoginComponent,
    LogoutComponent,
    SignupComponent,

    FilesComponent,
    NavbarComponent,
    ProfileComponent,
    UploadComponent,
    SampleGridApplicationComponent,
    SampleResultButtonComponent,
    AssetGridApplicationComponent,
    ResultComponent,
    ResetPasswordComponent,
    AssetComponentDetailComponent
  ],
  bootstrap: [ AppComponent ],
  entryComponents: [AssetComponentDetailComponent]
})
export class AppModule {}

app-routing.module.ts

    @Injectable()
export class NoAuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate() {
    const activeUser = Kinvey.User.getActiveUser();
    if (activeUser) {
      return true;
    }

    // Navigate to the login page
    this.router.navigate(['/login']);
    return false;
  }
}

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate() {
    const activeUser = Kinvey.User.getActiveUser();
    console.log("AuthGuard, CanActivate");
    if (!activeUser) {
      return true;
    }

    // Navigate to the main page
    this.router.navigate(['']);
    return false;
  }
}

const appRoutes: Routes = [
  {
    path: '',
    component: NavbarComponent,
    canActivate: [NoAuthGuard],
    children: [
      { path: '', component: SampleGridApplicationComponent },

      { path: 'files', component: FilesComponent },
      { path: 'upload', component: UploadComponent },

      { path: 'profile', component: ProfileComponent },

      { path: 'sampleitems', component: SampleGridApplicationComponent },
      { path: 'assetitems', component: AssetGridApplicationComponent },
      { path: 'result/:id', component: ResultComponent}

    ]
  },
  { path: 'login', component: LoginComponent, canActivate: [AuthGuard] },
  { path: 'logout', component: LogoutComponent },
  { path: 'signup', component: SignupComponent, canActivate: [AuthGuard] },
  { path: 'reset', component: ResetPasswordComponent, canActivate: [AuthGuard] }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {useHash: true})
  ],
  exports: [
    RouterModule
  ],
  providers: [
    AuthGuard,
    NoAuthGuard
  ]
})
export class AppRoutingModule {}

编辑经过更多的挖掘，我相信这个问题与这里有关，但是建议修复无法解决此问题.

EDIT After some more digging I believe the issue is related to the issue here however the suggested fix does not resolve this issue.

推荐答案

问题最终是 angular router 中的一个错误，降级到版本 4.1.3 修复了该问题.希望这可以帮助其他任何尝试在 Kinvey SDK 中使用最新版本的 angular 的人.

The problem ended up being a bug in angular router, downgrading to version 4.1.3 fixed the issue. Hopefully this helps anyone else that tries using the latest version of angular with the Kinvey SDK.

这篇关于在 router.navigate 之后没有调用 ngOnInit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！