Estoy aprendiendo Angular 4.0 de este tutorial en su sitio web. Puedo ejecutar la muestra, pero encuentro el problema en mi proyecto cuando quiero agregar una para simular una lista desplegable usando boostarp. Veamos los detalles:

aplicación-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 {}

cuando escriba 'http://localhost:3000' en el navegador, la página se redirigirá a 'http://localhost:3000/mission' y mostrará todo.

Luego agrego el siguiente código al html correspondiente a '/mission' y hago clic en el hipervínculo, el navegador volverá a 'http://localhost:3000' y redirigirá a 'http://localhost:3000/mission' nuevamente . Esa no es mi expectativa, según tengo entendido, no debería actualizar la página y solo mostrar la lista desplegable después de hacer clic.

 <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>

No sé por qué y cómo solucionar el problema.