Question

尝试实现一个三栏菜单图标，该图标在单击时变为“ X”。不知道为什么未定义切换。有人可以解释我哪里出错了吗？

来自app.component.ts：

import { Component} from '@angular/core';
    @Component({
      selector: 'app-root',
      template: ` 
      <body>
        <div class ='bg'> <br>
        <div class='interactivemenu' (click)="cool(this)"> 
        <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      </div>
        <div id='menubar'>
            <ul class='menu'>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='home' [routerLink]="['/home']">Home</a></li>
              <li><a class='nav-link' routerLinkActive='active'class="menu" id='resume' [routerLink]="['/resume']">Resume</a></li>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='projects'[routerLink]="['/projects']">Projects</a></li>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='about'[routerLink]="['/about']">About </a></li>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='contact'[routerLink]="['/contact']">Contact </a></li>
              </ul>
             </div><br>
        <div id='slideshow'> SLIDESHOW</div>
        <div class='container'>
          <router-outlet></router-outlet>
        </div>
        <div id= 'footer'>
        <a href='http://www.instagram.com'> <img src= './assets/instagram-vector-png--400.png' alt='instagram'></a>
        <a href='http://www.twitter.com'> <img src= './assets/Twitter_Social_Icon_Rounded_Square_Color.png' alt='twitter' class="twitter"></a>
         <a href='http://www.facebook.com'><img src= './assets/f_logo_RGB-Hex-Blue_512.png' alt='facebook' class="facebook"></a>
        </div>
        </div>
        </body>
        `,
      styleUrls: ['./app.component.css']
    }


    )


    export class AppComponent {
        pageTitle = "Practice";

        cool (x:any){
         x.classList.toggle("change");
        }
    }

Answer 1

您可能要尽可能避免修改DOM。此外，使用ngClass可以更轻松地检测到这些变化并对它们做出反应。

尝试一下：

@Component({
        selector: 'app-root',
        template: `
            <body>
            <div class='bg'><br>
                <div class='interactivemenu' (click)="toggleMenu()" [ngClass]="[{'change': menuActive}]">
                    <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                </div>
                <!-- the rest of your page -->
            </div>
            </body>
        `,
        styleUrls: ['./app.component.css']
    }
)

export class AppComponent {
    public pageTitle = 'Practice';
    public menuActive: boolean = false;

    public toggleMenu() {
        this.menuActive = !this.menuActive;
    }
}

无法读取未定义的属性“ toggle”

1 个答案: