如何防止单击 angular-fontawesome 图标重定向到默认页面答案

【问题标题】：How to prevent clicking on a angular-fontawesome icon from redirecting to a default page如何防止单击 angular-fontawesome 图标重定向到默认页面
【发布时间】：2020-05-22 13:28:04
【问题描述】：

我在 Angular 应用程序中使用了很棒的字体图标（减号和加号）。当我的列表展开时加号图标变为减号，当列表折叠时减号变为加号。出于某种原因，单击该图标会导致重定向到我的主页。我怎样才能防止这种情况发生？我正在寻找的是当单击加号图标时，它会扩展我的列表，但让我保持在同一页面上，当单击减号图标时，它会折叠我的列表，但让我保持在同一页面上（即，不重定向）。这是我的代码：

<div>
  <a (click)="toggle(filters[0])" data-toggle="collapse" href="#coverageFilters" role="button" aria-expanded="true" aria-controls="coverageFilters"><fa-icon icon="{{filters[0]['collapse'] ? 'plus' : 'minus'}}"></fa-icon> {{filters[0].name}}</a>
  <div class="collapse show multi-collapse" id="coverageFilters">
    <ul class="filter" *ngFor="let item of filters[0].value"><input type="checkbox"> {{item}}</ul>
  </div>
</div>

这是切换功能的代码：

toggle(item){
  if (item['collapse'] == false){
    item['collapse'] = true;
  } else {
    item['collapse'] = false;
  }
}

我是否必须更改图标的任何默认设置？如果是，我在哪里可以找到它们以及我应该更改哪些设置？

【问题讨论】：

这不是因为字体太棒了...这是 href 属性
@Ramesh，为什么当我点击 {{filters[0].name}} 的输出而不将我重定向到其他页面时，href 属性会给出确切的结果，但我得到了当我点击图标本身时重定向到不同的页面？
@coder101 我相信这与this issue 相同。请查看my comment 以获得深入的解释和潜在的解决方案。 UPD 对不起，几乎一样。但是推理和解决方案非常相似。在您的情况下，Bootstrap 的单击处理程序会阻止默认链接行为（导航到链接）未执行。
@YaroslavAdmin：这正是我所需要的。我选择使用 setTimeout 选项而不是使用 ng-bootstrap，它就像一个魅力。谢谢。

标签： angular angular-fontawesome

【解决方案1】：

由于您的 a 标签具有类似 href="#coverageFilters" 的 href 属性。

点击它后，#coverageFilters 将被附加到 URL 路径中，现在如果您使用路由，那么角度搜索匹配新路径的路由（例如：localhost:3000/something#coverageFilters）但很可能您不这样做'没有这样的路径，你也可能有一个默认路径（在你的情况下是主页）被重定向到。因此，由于路径不匹配，您将被重定向到您的主页。

【讨论】：

当我单击 {{filters[0].name}} 的输出时，包含 a href 属性可以正常工作。但是当我单击图标时，它最终会将我重定向到主页（默认路径）。为什么会有不同的行为以及如何防止这种重定向行为？
确实如此。只需摆脱 a （无论如何您都没有链接到网址）并将点击触发器放在图标上：
@coder101 尝试使用$event.stopPropagation(); 和/或$event.preventDefault();，如mensur 的回答中所述。
感谢所有反馈。一个更简单的解决方案发布在@YarsolavAdmin 共享的链接中 - 使用 setTimeout 选项。只需一行代码就可以解决问题。

【解决方案2】：

试试这样的：

(click)="preventRedirectOnClick($event, filters[0])"

在.ts中：

preventRedirectOnClick($event, item) {
  $event.stopPropagation();
  $event.preventDefault();

  this.toggle(item);
}

【讨论】：