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

Create a navbar adaptable to small screens in Angular

提问人：Denis 提问时间：8/29/2023 最后编辑：cMariusDenis 更新时间：8/30/2023 访问量：36

问：

我正在为我的网站创建一个导航栏，我想让它适应小屏幕。为此，当我缩小屏幕时，所有导航栏选项都会折叠成一个条纹图标。我的问题是我怎样才能使这个图标可点击，以便使用 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 标签中，如下所示：

<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");
});

先谢谢你！

html angular 打字稿 dom 导航栏

评论

0赞 FunkMonkey33 8/29/2023
从您的代码来看，您似乎正在使用 Bootstrap。我认为正在发生的事情就是我在下面谈论的内容：JQuery 更改了类，然后 Angular 将其改回。如果您使用我的回答中详述的数据绑定方法，则不会发生这种情况。
0赞 Denis 8/31/2023
感谢您的回复。就像我对下一个答案的回应：我想我不清楚。我发布的 JQuery 是我用来提示我的 TS 代码的代码。我没有将 JQuery 用于 Angular 项目，但我想知道我应该如何编写代码以获得与 JQuery 中的代码相同的结果。

答：

0赞 FunkMonkey33 8/29/2023 #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 等。他们有开箱即用的菜单。

祝你好运。

评论

0赞 Denis 8/31/2023
感谢您的回复。我想我不清楚：在我的问题中发布的 JQuery 中的代码是我在互联网教程中找到的，我没有在我的项目中使用它，但我只是从它那里得到了我的 TS 代码的提示。现在，我的问题是在标签中，我必须将 [class.active]=“this.menuActive” 放在 HTML 文件中？[class.nameClass]=“” 和 [ngClass]=“” 有什么区别。谢谢你的帮助！
0赞 FunkMonkey33 8/31/2023
标记缺少 Bootstrap 导航栏的几个元素。这就是它不起作用的原因。您应该浏览 getbootstrap.com/docs/5.3/components/navbar 中的示例。
0赞 FunkMonkey33 8/31/2023
从功能上讲，[class.active]=“expression” 和 [ngClass]=“{'active'： expression}” 是相同的。唯一的区别是，你可以使用 ngClass 同时添加多个类，方法是用逗号分隔表达式，例如 [ngClass]=“{'active'： expression， 'highlighted'： otherExpression}”
0赞 Denis 9/1/2023
好的，谢谢你。你真的在帮助我。另一个问题，如果可以的话。减少导航栏的按钮 （<div class=“menu-btn”>） 来自以下库：kit.awesome。这是否也会影响功能，或者只是缺少引导程序......？谢谢。

上一个：角度亮度管理

下一个：获取在测试中通过 MatDialog 打开的组件的 Angular 组件实例