Góc 2 - nhiều mục lịch sử khi tải trang

Question

Khi tôi mở ứng dụng Angular 2 trong cửa sổ trình duyệt mới, tôi nhận được 10 mục nhập trong lịch sử trang trình duyệt. Điều này xảy ra trên bất kỳ trang liệt kê trong các bộ định tuyến và không có trang nào đó (ví dụ http://localhost:8080 hoặc http://localhost:8080/survey vv)

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'}, 
]; 

Tôi đang sử dụng bộ định tuyến 3.1.2

"@angular/router": "3.1.2", 

Tôi có tìm thấy một số similar question từ tháng 3 năm ngoái nhưng câu trả lời cho rằng nó đã được giải mã trong mã Angular rồi.

Cập nhật Theo yêu cầu, đây là mã 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

tôi đã có một tình huống tương tự và tôi giải quyết nó bằng các tuyến đường lười tải Đó là bạn có thể tách các tuyến đường đến mô-đun khác nhau định tuyến quảng cáo trong tải tuyến đường chính như thi

TRÊN con đường chính

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

SO inthe sử dụng mô-đun bạn sẽ có

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

}) 
export class UserModule { 

} 

sau đó các module sử dụng định tuyến có

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

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

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

Thats làm thế nào tôi giải quyết vấn đề của tôi, tôi hy vọng điều này sẽ giúp.

NB: nhớ con đường chính để import.forRoot

Trong trường hợp này đảm bảo rằng trong module gốc (mô-đun probly ứng dụng bạn import module sử dụng)

@NgModule({ 
    declarations: [ 
    ], 

    imports: [ 

    UserModule, //in your case maybe use survey module 

    ], 

    }) 

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