Question

我的Angular2 / Meteor应用程序出现问题。我正在尝试从另一个组件重定向到一个组件，但它似乎第一次没有加载。但是，当我刷新页面时，它会完美加载。当我调试时，我看到我的html视图没有显示任何变量，我的变量值似乎正确，但它们没有显示在View上。

这是我的警卫：

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

Answer 1

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

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

这解决了我的问题。

路由器第一次导航时没有加载组件

1 个答案: