Angular2应用程序在页面重新加载时转到根组件

Question

我正在创建一个具有如下结构的角度应用， 应用

--> Front
    |
    --> dashboard.component.ts
    -->login.component.ts
    -->aboutus.component.ts
--> app.module.ts
--> app.component.ts

文件：App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import {AppComponent} from './app.component';
import {HeaderComponent} from './Front/header.component';
import {FrontPageComponent} from './Front/frontpage.component';
import {FooterComponent} from './Front/footer.component';
import {AboutUsComponent} from './Front/aboutus.component';
import {ContactUsComponent} from './Front/contactus.component';
import {LoginComponent} from './Front/login.component';
import {RegisterComponent} from './Front/register.component';
import {DashBoardComponent} from './Front/dashboard.component';
import {SliderComponent} from './Front/slider.component';
import {RouterModule} from '@angular/router';

import {UserService} from './Services/user.service';
import {RoleService} from './Services/role.service';
import {LoginCheckService} from './Services/logincheck.service';
import { CookieService } from 'ng2-cookies';



@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FrontPageComponent,
    FooterComponent,
    AboutUsComponent,
    ContactUsComponent,
    LoginComponent,
    RegisterComponent,
    DashBoardComponent,
    SliderComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: '', component: FrontPageComponent
      },
      {
        path: 'login', component: LoginComponent
      },
      {
        path: 'register', component: RegisterComponent
      },
      {
        path: 'contactus', component: ContactUsComponent
      },
      {
        path: 'aboutus', component: AboutUsComponent
      },
      {
        path: 'dashboard', component: DashBoardComponent
      }
      ], {useHash: true}),
    FormsModule,
    HttpModule
  ],
  entryComponents: [
  ],
  providers: [UserService, RoleService, LoginCheckService, CookieService],
  bootstrap: [AppComponent]
})

export class AppModule {
}

Dashboard.component.ts

import {Component, OnInit} from '@angular/core';
import {User} from '../Models/user.model';
import {Role} from '../Models/role.model';
import {Http} from '@angular/http';
import {ActivatedRoute, Router} from '@angular/router';
import {LoginCheckService} from '../Services/logincheck.service';
import {UserService} from '../Services/user.service';
import {RoleService} from '../Services/role.service';
import {MenuItem} from "../Models/menuitem.model";

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashBoardComponent implements  OnInit {
  private menuitems: MenuItem[];
  user: User;
  role: Role;
  isLoggedIn: boolean;

  constructor(
    private http: Http,
    private route: ActivatedRoute,
    private router: Router,
    private logInCheckService: LoginCheckService,
    private userService: UserService,
    private roleService: RoleService,
  ) {
    this.menuitems = new Array<MenuItem>();
    this.menuitems.push(new MenuItem('Courses', 'CoursesComponent', 'course'));
  }

  ngOnInit(): void {
    console.log('Init Called on Dashboard Compoenent');
    this.logInCheckService.logInObservable.subscribe(data => this.isLoggedIn = data);
    this.userService.userObservable.subscribe(data => this.user = data);
    this.roleService.roleObservable.subscribe(data => this.role = data);
    console.log(document.cookie);
  }

}

现在我的问题是当我点击URL http://localhost:4200/#/dashboard按回车键时，页面会路由到app.component.ts并且不会加载仪表板组件。