1

我在 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;
  }
}

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

4

2 回答 2

2

由于您的a标签具有 href 属性，例如href="#coverageFilters".

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

于 2020-02-06T13:37:02.543 回答
0

尝试这样的事情：

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

在 .ts 中：

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

  this.toggle(item);
}
于 2020-02-06T13:43:56.757 回答