路由器导航第一次未加载组件答案

【问题标题】：Router navigate not loading component the first time路由器导航第一次未加载组件
【发布时间】：2018-02-21 22:43:12
【问题描述】：

我的 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;
        }
    }
}

我的路由模块：

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');
我试过了，但是没用 :(
尝试这样使用 this.router.navigate(['/accueil]);
也试过了，不行:(
能发一下app.module代码吗

标签： javascript angular meteor angular2-routing

【解决方案1】：

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

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

这解决了我的问题。

【讨论】：