AngularDart点击事件添加/移除CSS类问题求助

嘿，我一眼就看到问题所在了——你每次点击汉堡按钮时，都在clickBurger()函数开头把openMenu强制重置为false，这直接导致后续的条件判断永远只会执行添加类的逻辑，根本没机会触发移除操作！

问题根源分析 #

看你这段Dart代码：

void clickBurger() {
  final menuBtn = document.querySelector('.nav-burger');
  openMenu = false; // 这里每次点击都强制重置为false！
  if(openMenu == false){
    menuBtn.classes.add('open');
    openMenu = true;
  } else if (openMenu == true){
    menuBtn.classes.remove('open');
    openMenu = false;
  }
}

不管之前openMenu是true还是false，进入函数后第一行就把它改成false，所以if条件永远成立，只会执行menuBtn.classes.add('open')，自然无法移除类。

另外还有两个小细节可以优化：

• 你在函数里重新声明了menuBtn变量，覆盖了类成员的menuBtn，虽然不影响功能，但没必要重复声明。
• 在AngularDart里直接用document.querySelector操作DOM不是最佳实践，框架本身提供了更优雅的绑定方式。

方案1：修复现有逻辑（保留DOM操作） #

只需要删掉函数开头的openMenu = false;，改成切换openMenu的状态即可：

import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'nav-bar',
  styleUrls: ['nav_bar_component.css'],
  templateUrl: 'nav_bar_component.html',
  directives: [coreDirectives, MaterialIconComponent],
)
class NavBarComponent {
  bool openMenu = false; // 初始化默认关闭状态

  void clickBurger() {
    final menuBtn = document.querySelector('.nav-burger');
    // 切换openMenu的状态：true变false，false变true
    openMenu = !openMenu;
    if(openMenu){
      menuBtn.classes.add('open');
    } else {
      menuBtn.classes.remove('open');
    }
  }
}

方案2：使用AngularDart的类绑定（推荐） #

完全避免直接操作DOM，利用Angular的响应式绑定语法[class.open]="openMenu"，框架会自动帮你管理类的添加和移除，代码更简洁：

第一步：修改HTML模板 #

把汉堡按钮的<span>标签改成这样：

<span (click)="clickBurger()" [class.open]="openMenu" class="nav-burger"></span>

第二步：简化Dart代码 #

现在clickBurger函数只需要切换openMenu的状态就行，剩下的交给框架处理：

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'nav-bar',
  styleUrls: ['nav_bar_component.css'],
  templateUrl: 'nav_bar_component.html',
  directives: [coreDirectives, MaterialIconComponent],
)
class NavBarComponent {
  bool openMenu = false; // 初始化默认关闭状态

  void clickBurger() {
    openMenu = !openMenu; // 只需切换状态，框架自动处理类的增减
  }
}

这种方式更符合Angular的响应式编程理念，也减少了手动操作DOM的潜在bug。

内容的提问来源于stack exchange，提问作者Mr_Greed