[英]ngOnInit not being called after router.navigate
我的 Angular 應用程序在ngOnInit()
之后突然沒有調用router.navigation()
這意味着我的組件沒有正確加載。 我認為這可能是由於我所做的一些更改,但恢復更改並沒有解決問題。
正常導航導致組件無法正確加載的示例; 此頁面由以下代碼清單導航: this.router.navigate(['/result', this.params.data._id]);
:
重新加載頁面,組件正確加載:
這是我的一些代碼清單,
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 {}
編輯經過一些更多的挖掘,我相信這個問題與這里的問題有關,但是建議的修復並沒有解決這個問題。
看來這個問題依然存在,即使在5.0已經發布之后,至少https://github.com/angular/angular/issues/18254的問題還沒有解決。 好消息是問題中描述了一種解決方法,使用:
this.zone.run(() => {
this.router.navigateByUrl( url );
});
我在 Firebase 的 onAuthStateChanged 回調中遇到了問題,上述解決方法有所幫助。
該問題最終成為 angular router 中的一個錯誤,降級到 4.1.3 版修復了該問題。 希望這可以幫助其他任何嘗試使用 Kinvey SDK 的最新版本 angular 的人。
在要加載數據的組件中添加以下行
ionViewWillEnter(){
this.ngOnInit();
}
重定向后它將手動調用ngOnInit
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.