Как переключить класс в Angular, используя событие click

Question

У меня есть два компонента в моем проекте. Один - header.component, а другой - sidebar.component. В header.component у меня есть кнопка навигации, чтобы открыть sidebar. Таким образом, в основном, когда кто-то нажимает на кнопку, боковая панель будет открыта. Я объявил класс is-open в своем файле CSS, чтобы добавить его к элементу компонента боковой панели. Поэтому мне нужно прослушать событие клика из header.component и переключить класс is-open на sidebar.component

Я добавил простой файл js в свой проект angular для этого, как показано ниже:

window.onload = function () {
    let navBtn = document.getElementById('drawerbtn')

    navBtn.addEventListener('click', function () {
        let navDrawer = document.getElementById('navdrawer')
        navDrawer.classList.toggle('is-open')
        console.dir(navDrawer)
    })
}

Я проверил консоль, и она работает, но в моем элементе is-open класс не добавляется. Как я могу сделать это так легко?

Answer 1

Лучшее решение для этого - создать службу, которой будет поручено управлять состоянием боковой панели или чем угодно. В этом сервисе вам нужно создать одну переменную, например: isMenuOpen, эта переменная может быть BehaviorSubject или Subject. Затем в компоненте необходимо подписаться на изменения в этой переменной или непосредственно в вашем HTML, используя канал asyn c. И, наконец, когда вам нужно показать меню, вы можете переключаться между классами 2 CSS или напрямую изменять, используя свойство «display» между none и block. Angular является платформой агностии c, используя окно или документ, вы нарушаете эту агностицизм.

Answer 2

Это сделает работу за вас:

В HTML:

<button [ngClass]="isOpen() ? 'is-open': ''" (click)="toggle()">Toggle</button>

В файле TS:

isOpened: boolean=false;

isOpen(){
 return this.isOpened;
}

toggle(){
 this.isOpened=!this.isOpened;
}

Это можно даже упростить как ниже:

In HTML:

<button [ngClass]="isOpened ? 'is-open': '' (click)="isOpened=!isOpened">Toggle</button>

In TS:

isOpened: boolean=false;

Приведенный выше код применяется к тем же кнопкам. Но что, если мы должны реализовать их в разных компонентах? Скажем, 3 компонента - заголовок, боковой неф и основной контент. Затем мы должны обмениваться данными между компонентами, используя @Input и @Output, чтобы получить состояние. Ниже ссылки могут помочь:

https://stackblitz.com/edit/angular-sf-side-menu?file=src%2Fapp%2Fapp.component.ts

https://angular-sf-side-menu.stackblitz.io

Надеюсь, это поможет.