angular - 如何使用点击事件在 Angular 中切换类

Question

我的项目中有两个组件。一个是header.component，另一个是sidebar.component。在 header.component 中，我有导航按钮来打开sidebar。 所以，基本上当有人点击按钮时侧边栏就会打开。我在 CSS 文件中声明了 is-open 类，以将其添加到侧边栏组件的元素中。所以我需要监听 header.component 中的点击事件并将 is-open 类切换到 sidebar.component

我在我的 Angular 项目中添加了一个简单的 js 文件，如下所示:

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 中订阅。 最后，当您需要显示菜单时，您可以在 2 个 CSS 类之间切换，或者直接使用属性“display”在无和 block 之间进行更改。 Angular 与平台无关，使用窗口或文档就打破了这种不可知论。