Как предотвратить перенаправление на значок angular -fontawesome на страницу по умолчанию

Question

Я использую шрифтовые иконки (минус и плюс) в приложении 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;
  }
}

Нужно ли менять какие-либо настройки по умолчанию для значков? Если да, где я могу их найти и какие настройки изменить?

Answer 1

Поскольку ваш тег a имеет атрибут href, например href="#coverageFilters".

. После нажатия на него #coverageFilters будет добавлен к URL-пути, и теперь, если вы используете маршрутизацию, angular ищет маршрут, соответствующий новому пути (Пример: localhost: 3000 / что-то # coverFilters), но, скорее всего, у вас нет такого пути, и у вас также может быть путь по умолчанию (домашняя страница в вашем случае) для перенаправления. Так что из-за непревзойденного пути вы перенаправлены на свою домашнюю страницу.

Answer 2

попробуйте что-то вроде этого:

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

в .ts:

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

  this.toggle(item);
}