Angular 2 - 页面加载时有许多历史条目

Question

当我在一个新的浏览器窗口中打开我的 Angular 2 应用程序时，我在浏览器页面历史记录中得到 10 个条目。这发生在路由器中列出的任何页面上，并且没有指定页面(即 http://localhost:8080 或 http://localhost:8080/survey 等)

const routes: Routes = [
    {path: 'survey', component: SurveyComponent, canActivate: [AuthGuard]},
    {path: 'survey/:id', component: SurveyComponent, canActivate: [AuthGuard]},
    {path: '', component: HomeComponent},
    {path: 'about', component: AboutComponent},
    {path: 'terms', component: TermsAndConditionsComponent},
    {path: 'map', component: MapComponent},
    {path: 'what-next', component: WhatNextComponent},
    {path: 'contact', component: ContactComponent},
    {path: '**', redirectTo: '', pathMatch: 'full'},
];

我正在使用路由器 3.1.2

"@angular/router": "3.1.2",

我找到了 similar question从去年三月开始，但答案声称它已经在 Angular 的代码中解决了。

更新根据要求，这是 AuthGuard 代码

import {Injectable} from '@angular/core';
import {AuthenticationService} from '../_services/index';
import {LoginModalService} from "../login_modal/login_modal.service";
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private authentication: AuthenticationService, private loginModalService: LoginModalService) {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (this.authentication.isAuthenticated()) {
            return Observable.of(true);
        } else {
            this.loginModalService.toggleVisable(state.url);
            return Observable.of(false);
        }
    }
}

Answer 1

我有类似的情况，我通过延迟加载路由解决了它也就是说，您可以像这样在主路由负载中分离到不同模块路由广告的路由

在主干道上

      {
        path: 'dashboard',
        component: DashboardComponent,
      },
      {
        path: 'user',
        loadChildren: 'app/user/user.module#UserModule',  //in user module
      },

SO 在你的用户模块中

@NgModule ( {
  imports: [
   userRoutingModule //contains my user module routes
  ] ,

 } )
export class UserModule {

 }

然后用户路由模块有

const userRoutes: Routes = [
        { path: '', component: UserComponent},
     ];

 @NgModule({
  imports: [
    RouterModule.forChild(userRoutes)
   ],

   exports: [RouterModule],
     providers: []
   })
 export class userRoutingModule { }

这就是我解决问题的方法，希望对您有所帮助。

注意:记住 import.forRoot 的主要路径

在这种情况下，确保在根模块中(可能是您导入用户模块的应用程序模块)

  @NgModule({
    declarations: [
    ],

  imports: [

    UserModule,  //in your case maybe use survey module

    ],

   })

  export class AppModule {}  //this is in my root module