第一次路由器導航不加載組件

我遇到了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 { }

來源

2017-09-13 John Dri

嘗試在路線前使用'/'，如this.router.navigate（'/ accueil'）; – Vignesh

我試過，但它沒有工作:( –

嘗試使用像這樣this.router.navigate（['/ accueil]）; – Vignesh

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

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

這解決了我的問題。

來源

2017-09-14 10:40:22

第一次路由器導航不加載組件

回答

相關問題