Question

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

我为我的angular项目添加了一个简单的js文件，如下所示：

sidebar.component

我检查了控制台，它可以正常工作，但是在我的元素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) }) }中没有添加类。我怎么能那么容易地做到这一点？

Answer 1

为此的最佳解决方案是创建一个服务，该服务将负责管理侧边栏或任何您想要的状态。在此服务中，您需要创建一个变量，例如：isMenuOpen。此变量可以是BehaviorSubject或Subject。然后在组件中，您需要使用异步管道在该变量中或直接在HTML中预订更改。最后，当您需要显示菜单时，可以在2个CSS类之间切换，也可以使用无和块之间的“显示”属性直接更改。 Angular与平台无关，使用window或Document破坏了这种不可知论。

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

这甚至可以简化如下：

在HTML中：

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

在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

希望这会有所帮助。

如何使用单击事件在Angular中切换类

2 个答案: