Angular中ngClass绑定样式不生效问题的排查与解决

最近开发Angular导航菜单组件时碰到了一个奇怪的问题：明明通过按钮切换visible布尔值时，Chrome开发者工具里能看到open类被正确添加和移除，但这个类对应的显示样式就是没反应。

先给大家看下我的代码场景：
组件TS定义：

@Component({
  selector: "nav-menu",
  templateUrl: "./navmenu.component.html",
  styleUrls: ["./navmenu.component.scss"]
})

HTML里用[ngClass]="{'open': visible}"给目标div绑定类，点击按钮切换visible的状态。

一开始我以为是Angular的绑定有问题，反复检查了逻辑确认visible的切换没问题，直到盯着SCSS代码看了半天，才发现是选择器写错了！

原来我的SCSS是这么写的：

$bg-primary: #007bff;
.nav-menu-fixed {
  position: fixed;
  top: 57px;
  left: 5px;
  width: 200px;
  border-radius: 10px;
  padding: 5px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 500ms, opacity 500ms;
  background-color: $bg-primary;
  .open {
    visibility: visible;
    opacity: 1;
  }
  .divider {
    height: 2px;
    width: 90%;
    background-color: silver;
    margin: 0 auto;
  }
  .item {
    padding: 10px;
    border-radius: 10px;
    &:hover {
      background-color: lighten(lightgray, 10%);
      color: black;
    }
  }
}

这里把.open嵌套在了.nav-menu-fixed里面，Sass编译后会生成后代选择器 .nav-menu-fixed .open，意思是匹配.nav-menu-fixed下的子元素里带.open类的元素。但实际我的DOM结构是<div class="nav-menu-fixed open">——open是和nav-menu-fixed同一个元素的类啊！这个选择器根本匹配不到目标元素，样式当然不会生效。

找到问题就好办了，有两种修复方式：

方式一：把.open移到外部，写成交集选择器 #

$bg-primary: #007bff;
.nav-menu-fixed {
  position: fixed;
  top: 57px;
  left: 5px;
  width: 200px;
  border-radius: 10px;
  padding: 5px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 500ms, opacity 500ms;
  background-color: $bg-primary;
  
  .divider {
    height: 2px;
    width: 90%;
    background-color: silver;
    margin: 0 auto;
  }
  .item {
    padding: 10px;
    border-radius: 10px;
    &:hover {
      background-color: lighten(lightgray, 10%);
      color: black;
    }
  }
}

.nav-menu-fixed.open {
  visibility: visible;
  opacity: 1;
}

方式二：用Sass的&父选择器保持嵌套结构 #

如果不想打乱嵌套结构，可以用&来引用父选择器，这样写更清晰：

$bg-primary: #007bff;
.nav-menu-fixed {
  position: fixed;
  top: 57px;
  left: 5px;
  width: 200px;
  border-radius: 10px;
  padding: 5px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 500ms, opacity 500ms;
  background-color: $bg-primary;
  
  // 用&代表父选择器.nav-menu-fixed，编译后就是.nav-menu-fixed.open
  &.open {
    visibility: visible;
    opacity: 1;
  }
  
  .divider {
    height: 2px;
    width: 90%;
    background-color: silver;
    margin: 0 auto;
  }
  .item {
    padding: 10px;
    border-radius: 10px;
    &:hover {
      background-color: lighten(lightgray, 10%);
      color: black;
    }
  }
}

两种方法都能正确匹配到同时拥有nav-menu-fixed和open类的元素，现在点击按钮切换状态时，样式终于正常生效了，Chrome和Firefox测试都没问题。

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