ngClass 和 onClick 不适用于 Div

Question

我有一个 javascript 项目，我正试图将其转换为 Angular，但我无法理解为什么类我的一些人甚至使菜单消失了再次阅读文档后。我想要只有在单击 .menu-btn 时才必须旋转到的菜单和 X。

这是我要转换的 javascript 代码：

 // Select DOM Items
const menuBtn = document.querySelector(".menu-btn");
const menu = document.querySelector(".menu");
const menuNav = document.querySelector(".menu-nav");
const menuBranding = document.querySelector(".menu-branding");
const navItems = document.querySelectorAll(".nav-item");

// Set Initial State Of Menu
let showMenu = false;

menuBtn.addEventListener("click", toggleMenu);

function toggleMenu() {
  if (!showMenu) {
    menuBtn.classList.add("close");
    menu.classList.add("show");
    menuNav.classList.add("show");
    menuBranding.classList.add("show");
    navItems.forEach((item) => item.classList.add("show"));

    // Set Menu State
    showMenu = true;
  } else {
    menuBtn.classList.remove("close");
    menu.classList.remove("show");
    menuNav.classList.remove("show");
    menuBranding.classList.remove("show");
    navItems.forEach((item) => item.classList.remove("show"));

    // Set Menu State
    showMenu = false;
  }
}

app.component.html

<header>
    <div class="container">

        <div class="menu-btn" [class.menu-btn.close]="check" (click)="myfunction()">
            <div class="btn-line"></div>
            <div class="btn-line"></div>
            <div class="btn-line"></div>
          </div>
          
          <!-- Overlay that comes up when you click menu -->
    
          <!-- Profile Image put in through CSS -->
          <nav class="menu" [class.menu-btn.show]="check" (click)="myfunction()">
            <div class="menu-branding" [class.menu-btn.show]="check" (click)="myfunction()">
                <div class="portrait"></div>
            </div>
           
            <!-- Pages -->
            <ul class="menu-nav" [class.menu-btn.show]="check" (click)="myfunction()">
                <li class="nav-item current" [class.menu-btn.show]="check" (click)="myfunction()">
                    <a href="index.html" class="nav-link">Home</a>
                </li>
                <li class="nav-item" [class.menu-btn.show]="check" (click)="myfunction()">
                    <a href="about.html" class="nav-link">About</a>
                </li>
                <li class="nav-item" [class.menu-btn.show]="check" (click)="myfunction()">
                    <a href="work.html" class="nav-link">Work</a>
                </li>
                <li class="nav-item" [class.menu-btn.show]="check" (click)="myfunction()">
                    <a href="contact.html" class="nav-link">Contact</a>
                </li>
            </ul>
          </nav>
    </div>
</header>

app.component.scss

     $primary-color: red;
$secondary-color: blue;

@mixin easeOut {
  transition: all 0.5s ease-out;
}

.container{
  background-color: grey;
  height:100px;
  box-sizing: border-box;
  
}

a{
  text-decoration: none;
  color:white;

}
.btn-line{
  color:blue;
}


header{
  position: fixed;
  z-index:2;
  width:100%;
}

.menu-btn{
  position: absolute;
  z-index:3;
  right:35px;
  top:35px;
  cursor: pointer;
  @include easeOut;

  .btn-line{
    width: 28px;
    height: 3px;
    margin: 0 0 5px 0;
    background: white;
    @include easeOut;
  
  }
  //Rotate Into X with Menu Lines
  &.close {
    transform: rotate(180deg);

    .btn-line {
      // Line 1 - Rotate
      &:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }

      // Line 2 - Hide
      &:nth-child(2) {
        opacity: 0;
      }

      // Line 3 - Rotate
      &:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
      }
    }
  }
}

.btn-line{
  color:black;
}

app.component.ts

export class AppComponent {
  title = 'menu';

   check:boolean=true;
  
    myfunction(){
      this.check=true;
    }

}

Answer 1

我相信简单的答案是您不能使用 [class.xxx.yyy] 指令一次添加两个 classes...

如果你想应用两个 classes，你必须在两个单独的 [class...] 指令中进行，或者使用 ngClass 指令，例如[ngClass]="{ xxx: check, yyy: check }"

编辑（在评论之后） 你的模板有诸如 [class.menu-btn.show]="check" 之类的东西当我假设你想同时添加 show 和 menu-btn class 基于变量 check 的值 - 如果这不是您的意图，我很抱歉。但无论如何，您要添加的 class 必须是该指令中的唯一名称（在 class. 之后），因此如果您要添加 show class，做 [class.show]="check"。您可以使用多个这样的指令，每个指令用于不同的 class.

ngClass 和 onClick 不适用于 Div

ngClass and onClick Not Applying to Div

javascript

angular

typescript

sass

angular11