<a> 元素 href 停止使用（单击）它

Question

我的navbar.html：

 <li>
 <a (click)="Close= !Close" href="/page1" >This Page</a>
 </li>
 <li>
 <a (click)="Close= !Close" href="/page2" >Another Page</a>
 </li>

app.html :

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

我有一个菜单，如果 Close 变量为真或假，我会在 css 使用转换的帮助下打开和关闭。现在，如果我单击菜单的一个元素，我的导航栏 blinks 会回到关闭状态，没有动画并重新加载页面内容。我找到的解决方案是将 (click)="Close= !Close" 添加到菜单的每个元素，这样他们也可以控制 open/close 动画。

当我向每个元素属性添加 (click)="Close= !Close" 时，href 停止重定向，我删除了 (click)="Close= !Close" 并确认它导致我的 href 完成它的工作。

这个有效：

 <li>
 <a href="/page1" >This Page</a>
 </li>

这个不要：

 <li>
 <a (click)="Close= !Close" href="/page1" >This Page</a>
 </li>
 <li>

正常吗？有什么解决方法吗？我需要在 Angular?

上使用其他类型的 href

<------------更新 1---------------->

当我将鼠标悬停在该元素上时，它会正确显示 link 该元素应该带我去的地方，属性中带有 (click)="Close= !Close" 的事件

Answer 1

使用routerLink

<a (click)="Close= !Close" [routerLink]="['/page1']" >This Page</a>

<a> 元素 href 停止使用（单击）它

<a> element href stops working with (click) on it

onclick

href

angular