Angular 2组件仅在刷新时不再渲染

Question

我正在尝试构建一个Angular 2管理应用程序，在我成功登录后，我被重定向到仪表板（ DashboardComponenent），只有当我刷新页面时才会呈现。 我尝试了几种方法来解决问题，但没有任何效果。 有关这个问题的原因的任何想法？

import { Routes } from '@angular/router';
import { ForgotPassComponent }   from './forgot/forgot-pass.component';
import { ForgotComponent }   from './forgot/forgot.component';
import { DashboardComponent }   from './dashboard/dashboard.component';
import { UserComponent }   from './user/user.component';
import { MapsComponent }   from './maps/maps.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { ProjectComponent } from './project/project.component';
import {AuthGuard} from './guard/auth.guard';
import { PreviewComponent } from './preview/preview.component';
import { TypeProjectComponent } from './TypeProject/Typeproject.component';
export const AppRoutes: Routes = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
    {
        path: 'dashboard',
        component: DashboardComponent, canActivate: [AuthGuard],
          data: { title: 'dashboard' }
    },{
        path: 'typeproject',
        component: TypeProjectComponent, canActivate: [AuthGuard],
          data: { title: 'typeproject' }
    },
    {
        path: 'user',
        component: UserComponent,
          data: { title: 'user' }
    },

    {
        path: 'login',
        component: LoginComponent,
         data: { title: 'login' }
    },
    {
        path: 'signup',
        component: SignupComponent,
         data: { title: 'signup' }
    },  {
          path: 'forgot',
          component: ForgotComponent,
           data: { title: 'forgot' }
      },  {
            path: 'forgot/pass'+localStorage.getItem('token'),
            component: ForgotPassComponent,
             data: { title: 'forgotpass' }
        },

    {
      path: 'project',
      component: ProjectComponent,
       data: { title: 'project' }
    },
     {
      path: 'preview',
      component: PreviewComponent,
       data: { title: 'preview' }
    }
]

和package.json

{
  "name": "pd-free-angularcli",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ngui/map": "^0.18.3",
    "@ngx-translate/core": "^7.0.0",
    "@ngx-translate/http-loader": "^0.1.0",
    "@types/googlemaps": "^3.26.14",
    "angular2-flash-messages": "^1.0.8",
    "angular2-jwt": "^0.2.3",
    "angular2-notification-bar": "^1.2.4",
    "angular2-notifications": "^0.7.4",
    "angular2-wizard": "^0.4.0",
    "arrive": "^2.3.1",
    "bootstrap": "^3.3.5",
    "bootstrap-notify": "^3.1.3",
    "chartist": "^0.9.4",
    "core-js": "^2.4.1",
    "jquery": "^1.12.4",
    "moment": "^2.18.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.1.1",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

app.component.html

<div *ngIf="title!='login' && title!='signup'&&title!='forgot'&&title!='forgotpass'"  class="wrapper">
    <div class="sidebar" data-background-color="white" data-active-color="danger">
        <sidebar-cmp></sidebar-cmp>
    </div>
    <div class="main-panel">
        <navbar-cmp></navbar-cmp>
        <div class="content">
            <router-outlet></router-outlet>

        </div>
        <footer-cmp></footer-cmp>
    </div>
<!--    <fixedplugin-cmp></fixedplugin-cmp> -->

</div>
<div *ngIf="title=='login' " class="wrapper">
     <router-outlet></router-outlet>
    </div>
    <div *ngIf="title=='signup' " class="wrapper">
     <router-outlet></router-outlet>
    </div>
    <div *ngIf="title=='forgot' " class="wrapper">
     <router-outlet></router-outlet>
    <div *ngIf="title=='forgotpass' " class="wrapper">
     <router-outlet></router-outlet>
    </div>