在 Angular 17 中构建下拉菜单组件

Question

我正在尝试创建一个放置在角度 17 的组件中的下拉菜单。我有一个导航栏，其中仅放置徽标，然后在右侧有组件：

这是 HTML：

<div class="lang-btn">
  <button class="change-lang" (click)="isClicked()">
    <img
      src="../../../assets/navbar/it-button.png"
      alt="it-IT"
      class="lang-img"
    />
  </button>
</div>
<div class="langs-btn" *ngIf="isOpen">
  <ul class="lang-ul">
    <li class="lang-li">
      <button class="change-langs">
        <img
          src="../../../assets/navbar/en-button.png"
          alt="en-UK"
          class="lang-img"
        />
        <h6 class="lang">ENGLISH</h6>
      </button>
    </li>
    <li class="lang-li">
      <button class="change-langs">
        <img
          src="../../../assets/navbar/es-button.png"
          alt="es-ES"
          class="lang-img"
        />
        <h6 class="lang">ESPAÑOL</h6>
      </button>
    </li>
    <li class="lang-li">
      <button class="change-langs">
        <img
          src="../../../assets/navbar/fr-button.png"
          alt="fr-FR"
          class="lang-img"
        />
        <h6 class="lang">FRANÇAIS</h6>
      </button>
    </li>
  </ul>
</div>

这是组件：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-dropdown-lang',
  standalone: true,
  imports: [
    CommonModule
  ],
  templateUrl: './dropdown-lang.component.html',
  styleUrl: './dropdown-lang.component.css'
})
export class DropdownLangComponent {
  isOpen = false;
  isClicked() {
    this.isOpen = !this.isOpen
  }
}

为什么没有按预期工作？

PS：如果您在 :hover 上注意到它们并未完全对齐。 px 是对的，但我不知道它为什么不够精确

我一开始尝试使用 bootstrap 但没有成功。我尝试将所有内容都放在 app.component 的导航栏中，但它也不起作用。

Answer 1

下午好，

我正在学习如何使用 ANGULAR，并且遇到了同样的问题：我正在使用 Bootstrap 5.3.3 开发 ANGULAR 17.2.0，并尝试使用 ng-bootstrap (16.0.0)。

这是我的文件所在的位置：https://github.com/Septenia/FilRouge/tree/FilRouge/ChocoPap。

我有以下代码，但它不起作用，我不明白为什么。你能帮忙吗？

谢谢

import { Component, OnInit } from '@angular/core';
/* Import de ,Input, Output, EventEmitter, output  ... */
import { CommonModule } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-menu',
  standalone: true,
  imports: [CommonModule , NgbModule],
  templateUrl: './menu.component.html',
  styleUrl: './menu.component.css'
})

export class MenuComponent implements OnInit{
  pageAffichee: string = 'accueil';
  public isCollapsed: boolean = false;

  constructor() {}

  ngOnInit() :void {
  }

  onAccueil() {
    this.pageAffichee ='accueil';
  }
  onBoutique() {
    this.pageAffichee = 'boutique';
  }
  onPanier() {
    this.pageAffichee = 'panier';
  }
 
  onCollapse() {
    if (this.isCollapsed === true) {
      this.isCollapsed = false
    } else {
      this.isCollapsed = true
    }
  }
}

/* ************************************************************************************************* */
/* NAVBARRE */
/* ************************************************************************************************* */
#HMenu, .content{
    background-color: var(--miel);
    display: flex;
    justify-content: space-between;
    opacity: 0.8;
    width: 100%;
}

#imenuToggle{
    color : var(--caramel);
    font-size: 1.5em;
    border: none;
}

#HMenu img {
    height: 70px;
    margin: 20px;
}

#HMenu a:hover {
    color : var(--chocolatnoir);
    font-size : 18px;
    transition:0.4 ease-in-out;
}

/*Met en évidence le bouton du menu correspondant à la page affichée */
.active {
    font-size: 20px;
    font-family: 'Fjalla One';
    margin-top: 10px;
    color : var(--pateasucre) !important;
    font-weight: bold;
    text-decoration: none;
}

#header-right {
    display: flex;
    align-items: center;
}

#header-right p {
    margin-left: 20px;
}

#panier{
    font-size: 20px;
    margin-top: 10px;
}


/* ************************************************************************************************* */
/* AFFICHAGE POUR LES ECRANS DE TAILLE LG ET PLUS */
/* ************************************************************************************************* */
@media screen and (min-width:992px) {



}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!--HEADER BOOTSTRAP -->
<header id="entetePrincipale" class="container-fluid m-0 p-0">
    <!-- Barre de navigation -->
    <section id="HMenu" class="navbar navbar-expand-md m-0">        
        <!--Accessibilité-->
        <h1 class="accessibility">Menu Principal</h1>
        <p class="accessibility"><a href="#ContenuPrincipal" title="Accéder directement au contenu principal de cette page">Passer le menu</a></p>
        <!-- Navbar brand -->
        <a class="navbar-brand mt-2 mt-lg-0" href="accueil">
            <img src="../assets/images/logo.png" alt="Choco PAP Logo"/>
        </a>
        <!-- Menu hamburger -->
        <button id="menuToggle" class="navbar-toggler position-fixed top-0 end-0 z-index-tooltip" type="button" (click)="isCollapsed = !isCollapsed" aria-controls="navbarSupportedContent" [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation">
            <span class="" role="button" title="Menu"><i class="fa fa-bars" id="imenuToggle"></i></span> 
        </button>
        <!-- Liste des menus -->
        <nav role="navigation" [ngbCollapse]="isCollapsed" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-0 ">
                    <li class="nav-item active text-style1">
                        <a class="nav-link m-0" aria-current="page" href="accueil">Accueil</a>
                    </li>
                    <li class="nav-item text-style1">
                        <a class="nav-link m-0" href="boutique">Boutique</a>
                    </li>
                    <li class="nav-item Panier">
                        <a class="nav-link m-0" href="panier">0 &nbsp;<i class="fa-solid fa-cart-shopping" id="panier"></i></a>
                    </li>
            </ul>
        </nav>                
    </section>
</header>