web-dev-qa-db-ja.com

router.navigateの後にngOnInitが呼び出されない

私のAngularアプリは、ngOnInit()の後にrouter.navigation()を突然呼び出さないため、コンポーネントが正しく読み込まれません。いくつかの変更を加えましたが、変更を元に戻しても問題は解決しませんでした。

通常のナビゲーションによってコンポーネントが正しくロードされない例。このページは、次のコードリストによってナビゲートされます。this.router.navigate(['/result', this.params.data._id]);：

Component not loaded correctly

ページを再読み込みすると、コンポーネントが正しく読み込まれます。

Component loaded correctly

これが私のコードリストの一部です、

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 {}

[〜＃〜]編集[〜＃〜]もう少し掘り下げた後、この問題は問題に関連していると思います ここ ただし、提案された修正ではこの問題は解決されません。

angularangular-cliangular-routing
12
Mika571

問題は結局angularルーターのバグであり、バージョン4.1.3にダウングレードすると問題が修正されました。うまくいけば、これは、KinveySDKで最新バージョンのangularを使用しようとする他の人に役立つでしょう。

3
Mika571

5.0がリリースされた後でも、この問題はまだ発生しているようですが、少なくとも問題 https://github.com/angular/angular/issues/18254 はまだ解決されていません。幸いなことに、この問題で説明されている回避策があります。

        this.zone.run(() => {
          this.router.navigateByUrl( url );
        });

FirebaseのonAuthStateChangedコールバックで問題が発生し、上記の回避策が役立ちました。

13
Mattias