使用角度2路由时面临问题

Question

成功登录后，与仪表板页面一起，我的登录页面也显示在同一页面上

我想在成功登录后只显示仪表板页面

这是我的登录组件.ts ....

export class LoginComponent
{
    uName: string;
    password: any;
    router: any;
    constructor(private _router: Router)
    {
      this.router = _router;
    }
    checkCredentials()
    { 
        if (this.uName === 'root' && this.password === 'admin')
        {
          this.router.navigate(['/dashboard']);
        }
    }
}

我的Appmodule.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule} from '@angular/router';
import { FormsModule } from '@angular/forms'; // mainly for banana in box two way data binding
import { HttpModule } from '@angular/http'; // along with import we are registering http service with angulars injector
// this auto work is done by HttpModule for us
import { AppComponent }  from './app.component';
import { DashboardComponent } from './dashboardComponent';
import { LoginComponent } from './LoginComponent';

@NgModule({
  imports:      [ BrowserModule,
                  HttpModule,
                  FormsModule,                  
                  RouterModule.forRoot([                                        
                    {path: 'dashboard', component: DashboardComponent},
                    {path: 'login', component: AppComponent}
                  ])
                ], // to available this module in our application
  declarations: [ AppComponent, DashboardComponent, LoginComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

我的Login.html（在index.html中呈现）

<div class="container">
    <h2>Login</h2>
    <form>
        <div class="form-group">
            <label>User Name: </label>
            <input type="text" class="form-control" name="uName" [(ngModel)]="uName"> <!-- // [()] called as banana in box syntax -->
        </div>

        <div class="form-group">
            <label>Password: </label>
            <input type="password" class="form-control" name="password" [(ngModel)]="password">
        </div>
        <div class="pull-right">
            <button type="submit" (click)="checkCredentials()" class="btn btn-primary">Login</button>
            <button class="btn btn-primary">Cancel</button>        
       </div>
    </form>    
</div>

要明确了解我的Dashboard.html

<nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Khana Khajana</a>
          </div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Book Table</a></li>
            <li><a href="#">Register Restaurant</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </div>
</nav>

<h1>Welcome to Khana Khajana</h1>

Associated Component.ts为

import { Component } from '@angular/core';

@Component({

    selector: 'dashboad-page',
    templateUrl: './Dashboard.html'
})
export class DashboardComponent {    }