第一次路由器导航不加载组件

问题描述：

我遇到了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'}, 
];

我希望我和我解释清楚。不要犹豫，要求提供更多信息。谢谢！

编辑：我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 { }

尝试在路线前使用'/'，如this.router.navigate（'/ accueil'）; – Vignesh

我试过，但它没有工作:( –

尝试使用像这样this.router.navigate（['/ accueil]）; – Vignesh

答

好吧，我找到了答案。我不知道这是否是最好的解决方案，但至少它是可行的。

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

这解决了我的问题。

第一次路由器导航不加载组件

相关推荐