I am learning Angular 4.0 from this tutorial on its website. I can run the sample, but meet the problem in my project when I want to add a to simulate a dropdown list using boostarp. Let's look the details:

app-routing.module.ts:

const routes: Routes = [
{ path: '', redirectTo: 'mission', pathMatch: 'full' },
{ path: 'user', component: SlUserPanelComponent },
{ path: 'mission', component: SlMissionPanelComponent }
]
@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

when type 'http ://localhost:3000' in browser, the page will redirect to 'http ://localhost:3000/mission' and show everything.

Then I add following code to the html corresponding to '/mission', and click the hyperlink, the browser will come back to 'http ://localhost:3000' and redirect to 'http ://localhost:3000/mission' again. That is not my expection, as my understand, it should not refresh the page and just show the dropdown list after click.

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav navbar-left">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-globe"></i>
        <b class="caret"></b>
        ......
      </a>
    </li>
    <li>
    </li>
  </ul>
</div>

I don't know why and how to fix the problem.