Angular 2 Изменение className изменяет имя класса, а затем удаляет его

Question

Я пытаюсь переключить имя класса компонента, который получает щелчок.

  toggleActive(event) {
        const parentClass = event.target.parentElement
        debugger
        if (parentClass.className === 'active') {
            if (parentClass.previousElementSibling === null) {
                parentClass.nextElementSibling.className = 'active'
            } else {
                parentClass.previousElementSibling.className = 'active'
            }
            parentClass.className = ''
        } else {
            if (parentClass.previousElementSibling === null) {
                parentClass.nextElementSibling.className = ''
            } else {
                parentClass.previousElementSibling.className = ''
            }
            parentClass.className = 'active'
        }
    }

<ul class="nav nav-tabs">
    <li (click)="toggleActive($event)">
        <a href="#/detail/bopis/default/search/advanceSearch">Pick Up In Store</a>
    </li>
    <li (click)="toggleActive($event)"><a href="#/advanceSearch?BOSFS">Ship From Store</a></li>
</ul>

При первом нажатии <li> он переключится нормально.Тогда, если я не обновлю страницу, потребуется два клика, чтобы изменить класс.Когда я перехожу через отладчик, кажется, что все работает, а затем он просто сбрасывается на className = ""

Я ценю любую помощь или лучший способ сделать это.Я новичок в угловой.

Спасибо

Answer 1

Вам необходимо предотвратить событие щелчка по умолчанию для тега привязки, поэтому вам нужно

return false;

в конце вашей функции.