Routerが最初にコンポーネントをロードしないでナビゲートします

Question

私のAngular2/Meteorアプリケーションに問題があります。 他のコンポーネントからリダイレクトしようとしていますが、最初に読み込まれていないようです。しかし、ページをリフレッシュすると完全に読み込まれます。 デバッグすると、変数が表示されずにHTMLビューが表示され、変数の値は正しいように見えますが、ビューには表示されません。

これは私のガードです：

import { CanActivate } from "@angular/router"; 
import { Meteor } from 'meteor/meteor'; 
import { Router } from '@angular/router'; 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class RouteGuardService implements CanActivate { 

    constructor(public router: Router) { } 
    canActivate() { 
     if (Meteor.userId() != undefined) { 
      return true; 
     } 
     else { 
      let link = ['accueil']; 
      this.router.navigate(link); 
      return false; 
     } 
    } 
} 

マイroute.module：

import { Route } from '@angular/router'; 
import {AccueilComponent} from "./pages/accueil/accueil.component"; 
import {ChannelsComponent} from "./pages/channel/channels.component"; 
import { RouteGuardService } from './services/routeGuard.service'; 

export const routes: Route[] = [ 
    { path: '', component: AccueilComponent }, 
    { path: 'accueil', component: AccueilComponent, pathMatch: 'full' }, 
    { path: 'channel', component: ChannelsComponent, canActivate: [RouteGuardService], pathMatch: 'full'}, 
]; 

私は私が私の説明で明らかになった願っています。より多くの情報を躊躇しないでください。 ありがとう！

EDIT： マイapp.module：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { RouterModule } from '@angular/router'; 
import { Ng2DragDropModule } from 'ng2-drag-drop'; 
import { AccountsModule } from 'angular2-meteor-accounts-ui'; 
import { AppComponent } from './app.component'; 
import { MomentModule } from "angular2-moment"; 
import { ModalModule } from 'ngx-modialog'; 
import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap'; 
import { ChannelModal } from './pages/channel/channel_search/channel-list.modal'; 
import { RouteGuardService } from './services/routeGuard.service'; 

import { AccueilComponent } from "./pages/accueil/accueil.component"; 
import { LOGIN_DECLARATIONS } from './pages/login'; 
import { CHANNEL_DECLARATIONS } from './pages/channel'; 
import { routes } from './app.routes'; 

@NgModule({ 
    imports: [ 
     RouterModule.forRoot(routes), 
     Ng2DragDropModule.forRoot(), 
     ModalModule.forRoot(), 
     BrowserModule, 
     AccountsModule, 
     FormsModule, 
     ReactiveFormsModule, 
     MomentModule, 
     BootstrapModalModule, 
    ], 
    declarations: [ 
     AppComponent, 
     AccueilComponent, 
     ...LOGIN_DECLARATIONS, 
     ...CHANNEL_DECLARATIONS, 
     ChannelModal 
    ], 
    bootstrap: [ 
     AppComponent 
    ], 
    entryComponents: [ 
     ChannelModal 
    ], 
    providers:[ 
     RouteGuardService 
    ] 
}) 
export class AppModule { } 

Answer 1

さてさて、私は答えを見つけました。私はそれが最高の解決策かどうかは分かりませんが、少なくともそれは機能しています。

this.zone.run(() => this.router.navigate(['channel'])); 

これは私の問題を解決します。