我的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 {}
应用-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 {}
修改 经过一番挖掘后,我认为问题与问题here有关,但建议的修复程序无法解决此问题。
答案 0 :(得分:11)
似乎这个问题仍然存在,即使在5.0发布之后,至少问题https://github.com/angular/angular/issues/18254尚未解决。好消息是,该问题中描述了一种解决方法,使用:
this.zone.run(() => {
this.router.navigateByUrl( url );
});
我在Firebase的onAuthStateChanged回调中遇到了问题,上述解决方法也有帮助。
答案 1 :(得分:3)
问题最终成为角度路由器中的一个错误,降级到版本4.1.3解决了这个问题。希望这可以帮助其他任何尝试使用最新版本的角度与Kinvey SDK的人。
答案 2 :(得分:0)
在要加载数据的组件中添加以下行
ionViewWillEnter(){
this.ngOnInit();
}
它将在重定向后手动调用ngOnInit