在 Angular 中创建适应小屏幕的导航栏

Question

我正在为我的网站创建一个导航栏，我想让它适应小屏幕。为此，当我缩小屏幕时，所有导航栏选项都会折叠成条纹图标。我的问题是如何使该图标可单击以使用 TypeScript 显示所有导航栏选项。

这就是我尝试做的：

在 CSS 代码中我编写了一些图形效果类：

@media (max-width: 991px) {
    .max-width {
        padding: 0 50px;
    }
}

@media (max-width: 947px) {
    .menu-btn {
        display: block;
        z-index: 999;
    }  

    .menu-btn i.active::before {
        content: "\f00d"; /* Crocetta... */
    }

    .navbar .menu {
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background: #111;
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
    }

    .navbar .menu.active {
        left: 0;
    }

    .navbar .menu li {
        display: block;
    }

    .navbar .menu li a {
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
    }
}

在我的 TypeScritp 文件中，我尝试生成一个用于激活/禁用“.active”类的方法：

export class MenuComponent {

  public cambiaColore: boolean = false;
  public menuActive: boolean = false;

  constructor(@Inject (DOCUMENT) private document: Document) {}

  @HostListener('window:scroll')
  onWindowScroll() {

    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
      this.cambiaColore = true;
    } else {
      this.cambiaColore = false;
    }

  }

  //TODO: Comprendere come addattarlo al cellulare!
  toggleMenu() {
    this.menuActive = !this.menuActive;
  }
  
}

在我的 HTML 文件中，我尝试调用此方法并向导航标记添加一个“活动”类，如下所示：

<nav [class.addColor]="cambiaColore" [class.active]="menuActive" class="navbar">
    <div class="max-width">
        <div class="logo"><a href="#">Nucleo Mobile <span>Varese</span></a></div>
        <ul class="menu">
            <li><a href="#">In generale</a></li>
            <li><a href="#">La nostra missione</a></li>
            <li><a href="#">Cosa facciamo</a></li>
            <li><a href="#">Dove siamo</a></li>
            <li><a href="#">Contatti</a></li>
            <li><a href="#">Comun`your text`i</a></li>
        </ul>
        <div class="menu-btn">
            <i class="fas fa-bars" (click)="toggleMenu()"></i>
        </div>
    </div>
</nav>

但这不起作用。我不明白为什么。有人能帮助我吗？ 它基于这个 JQuery 代码：

$(".menu-btn').click(function() {
    $('.navbar .menu').toggleclass("active");
    $('.menu-btn i').toggleclass("active");
});

提前谢谢您！

Answer 1

首先，不要将 jQuery 与 Angular 一起使用，至少不要操作 DOM。原因是 Angular 还修改了 DOM，并且使用 jQuery，您可能会遇到竞争条件。 JQ 可能会以一种方式改变它，然后 Angular 会立即改变它。

事实上，你真的应该完全避免操作 DOM。而是使用数据绑定。比如：

public isMyMenuActive: boolean = false;

public toggleMenu(): void {
    this.isMyMenuActive = !this.isMyMenuActive;
}

<div class="X" [ngClass]="{'active': isMyMenuActive}"

其次，您可能想查看 bootstrap、ng-bootstrap、Angular Material 等。它们的菜单可以像这样开箱即用。

祝你好运。