RouterOutlet与Navbar发生故障

Question

我不完全确定这里发生了什么。我有一个像这样的导航栏：

<nav class="navbar navbar-default">
<div class="container-fluid">
<div>
  <a class="navbar-brand" [routerLink]="['/dashboard']">Haipe</a>
</div>
<ul class="nav navbar-nav">
    <li><a [routerLink]="['/dashboard']">Home</a></li>
    <li><a [routerLink]="['/events']">Events</a></li>
    <li><a [routerLink]="['/add-event']">Add Event</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a (click)="logout()" >Logout</a></li>
</ul>

</div>
</nav>

Dashboard组件具有navBar和routerOutlet。但是，当我单击链接时，它不会将组件的内容放在navBar下，这应该是路由器元素的默认行为。它将我送到一个完全不同的页面。

这些是我定义的路线。下面是app.Module.ts文件，其中包含我的所有路线：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { LoginFormComponent } from './components/login-form/login-form.component';
import { FooterComponent } from './components/footer/footer.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import {RouterModule,Routes} from '@angular/router';
import {Router} from '@angular/router';
import { Route } from '@angular/compiler/src/core';

//Firebase configuration
import {AngularFireModule} from 'angularfire2';
import {environment} from '../environments/environment';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import {AngularFireAuthModule} from 'angularfire2/auth';

//Forms
import {FormsModule} from '@angular/forms';
//All Components
import { EventsComponent } from './components/events/events.component';
import { EventDetailsComponent } from './components/event-details/event-details.component';
import { AddEventComponent } from './components/add-event/add-event.component';
import { EditEventComponent } from './components/edit-event/edit-event.component';
import { DeleteEventComponent } from './components/delete-event/delete-event.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { Component } from '@angular/core/src/metadata/directives';

const appRoutes:Routes = [
  {
    path: 'login',
    component: LoginFormComponent
  },{
    path: 'dashboard',
    component: DashboardComponent
  },{
    path: 'events',
    component: EventsComponent
  },{
    path: 'add-event',
    component: AddEventComponent
  },{
    path: 'edit-event/:id',
    component: EditEventComponent
  },{
    path: 'delete-event/:id',
    component: DeleteEventComponent
  },{
    path: 'event-details',
    component: EventDetailsComponent
  }
]

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    LoginFormComponent,
    FooterComponent,
    DashboardComponent,
    EventsComponent,
    EventDetailsComponent,
    AddEventComponent,
    EditEventComponent,
    DeleteEventComponent,
    NavbarComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),AngularFirestoreModule,AngularFireAuthModule,
    BrowserModule,FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

忘记包含DashBoard组件

<app-navbar></app-navbar>
<router-outlet></router-outlet>