防止角度 2 重定向<href= "#" >到主页

Question

我有一个指向仪表板的示例登录页面。登录页面设置为初始重定向页面，这将路由到仪表板。仪表板包含一个带有一些链接的下拉菜单。每次单击链接时，它都会不断重定向到登录页面。但是，当重新加载仪表板页面时，下拉菜单完全正常工作。

我正在考虑对链接使用"event.preventDefault(("，但我希望有一个解决方法。

仪表板菜单 - HTML

<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<a href="#"><i class="fa fa-calendar fa-fw"></i> Manage Events<span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>

编辑：得到一些回复后，我想澄清我的主要问题。问题存在于链接为空链接，并且 Angular 2 将其视为空链接并导致它重定向它。如果我能找到一种解决方法来告诉 Angular，请不要将此链接视为空链接，这将是理想的。

Answer 1

如果您在单击链接时不希望进行任何重定向，请查看以下解决方案：

制作空链接的不同方法？

或者，您可以放置<a>标签href没有属性。

Answer 2

<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<a href="javascript: void(0);"><i class="fa fa-calendar fa-fw"></i> Manage Events<span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li>
<a [routerLink]="['ManageEvents/LoremIpsum']">Lorem Ipsum</a>
</li>
<li>
<a [routerLink]="['ManageEvents/LoremIpsum']>Lorem Ipsum</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>

export const routes: Routes = [
{ path: 'ManageEvents/LoremIpsum', component: ManageEventsLoremIpsum } ];

Answer 3

这对我有用！！

<a href="" onclick="return false;">link</a>

希望这有助于链接也以这种方式工作

Answer 4

对我来说，我使用了routerLink并将其设置为空：

<a [routerLink]="" (click)="onClickPage()">Click me</a>

Answer 5

尝试删除 href，使用 CSS 设置cursor: pointer并句柄单击a元素，如<a (click)=yourFunction()></a>. 它应该;)工作

Answer 6

只需使用<a href>Lorem Ipsum</a>即可。

Answer 7

在父级收到来自子组件的事件后，我遇到了一种情况，它重定向到主页。我解决了父母的问题

receiveMessage($event) { //do something this.router.navigateByUrl('/parent-route'); }

甚至父路由也应该接受参数。

Answer 8

对我来说，它是javascript：void(0(;作品。角度 14

<a href="javascript:void(0);"> Last Page </a> // HTML file