如何使下拉菜单不重新加载页面上的插入符号单击角度 2

Question

我正在开发一个 Angular 2 应用程序，并按照引导程序示例为菜单栏创建了一个 HTML 组件。每当我单击第 1 页附近的插入符号时，它都会重新加载整个页面，而不仅仅是显示子菜单。我究竟做错了什么？

菜单栏：

<nav class="navbar navbar-inverse" *ngIf="showNavBar">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Streams</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Page 1
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
    </div>
</nav>

App.component.ts

import { Component } from 'angular2/core';
import { LoginComponent } from './home/login.component';
import { WelcomeComponent } from './home/welcome.component';
import { HTTP_PROVIDERS }  from 'angular2/http';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import { TopNavbarComponent } from './navbar.component';

@Component({
    selector: 'cmt-app',
    template: `<div class='container'>
                    <navbar></navbar>
                    <router-outlet></router-outlet>
                </div>
            `,
    directives: [ROUTER_DIRECTIVES, TopNavbarComponent],
    providers: [HTTP_PROVIDERS]
})

@RouteConfig([
        { path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true },
        { path: '/welcome', name: 'Welcome', component: WelcomeComponent }
])

export class AppComponent {
    
}

Answer 1

问题在于href="#". 尝试使用href="javascript:void(0)"

<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
                    Page 1
                    <span class="caret"></span>
</a>