angular - mat-menu 无法正常工作

问题描述

我希望 mat-item 与不同的 mat-menus 不同，我不知道到底是什么问题或者我误解了某些东西，但是所有 mat-menus 都采用最后一个 mat-menu 的值并采用它的 mat-items .说实话，我并没有真正了解如何使用它们，也没有找到完整的教程，也许正因为如此我犯了一个愚蠢的错误，所以不要严格判断。那是我的 HTML：

<div class="header background">
  <a mat-button><span>Sell your art</span></a>
  <a mat-button><span>Login</span></a>
  <a mat-button><span>Signup</span></a>
</div> 
 
<div class="container">
  <div class="form">
    <span><svg role="img" data-testid="ds-2019-logo" viewBox="0 0 197 40" xmlns="http://www.w3.org/2000/svg" class="node_modules--redbubble-design-system-react-Logo-styles__svg--148yc"><title>Redbubble logo</title><path data-testid="ds-wordmark" fill="#333" d="m68.434 34.027-0.11764-3.2012c-0.062742-1.7555-0.19868-5.8429-0.19868-5.8429-0.078428-2.5215-0.59605-4.4024-3.1044-5.0821v-0.12026c2.1097-0.84049 3.5815-3.2025 3.5815-6.4023 0-5.0442-2.3881-7.3644-7.0062-7.3644h-7.0847v28.013h4.5371v-11.525h2.1894c1.7908 0 2.4287 1.081 2.4679 2.9607l0.16078 5.7645a123.59 123.59 0 0 1 0.0366 2.7999h4.5384zm-4.4965-18.408c-0.039214 1.6405-0.59605 3.3619-2.7463 3.3619h-2.1515v-8.8846h2.1894c2.0313 0 2.7868 1.8012 2.7476 3.3214l-0.039214 2.2012zm133.81 18.408v-4.1619h-7.2846v-8.3238h5.9318v-4.1619h-5.9318v-7.2036h7.286v-4.1619h-11.824v28.013h11.824-0.001307zm-14.461 0v-4.1619h-7.286v-23.851h-4.5384v28.013h11.824zm-20.76 0c3.3057 0 6.171-2.4012 6.171-7.963 0-3.2822-1.6313-5.5632-3.8221-6.3239v-0.15816c2.2705-0.96074 3.6639-3.2809 3.6639-6.3631 0-5.2024-2.5489-7.2036-6.4102-7.2036h-7.6833v28.013h8.0807v-0.001307zm1.2745-19.049c-0.039214 1.9999-1.3542 2.9214-2.5489 2.9214h-2.3084v-7.8036h2.23c1.911 0 2.7058 0.92022 2.6666 3.1606l-0.039214 1.7215zm0.2392 11.605c0 2.2417-0.91499 3.4025-2.9071 3.4025h-2.1894v-8.4049h2.0705c1.911 0 3.026 1.362 3.026 3.2025v1.7999zm-18.546 7.4441c3.3044 0 6.1697-2.4012 6.1697-7.963 0-3.2822-1.6313-5.5632-3.8207-6.3239v-0.15816c2.2692-0.96074 3.6626-3.2809 3.6626-6.3631 0-5.2024-2.5489-7.2036-6.4102-7.2036h-7.6833v28.013h8.082v-0.001307zm1.2745-19.049c-0.040521 1.9999-1.3542 2.9214-2.5489 2.9214h-2.3084v-7.8036h2.2287c1.911 0 2.7071 0.92022 2.6666 3.1606l-0.039214 1.7215h0.001307zm0.2379 11.605c0 2.2417-0.91499 3.4025-2.9058 3.4025h-2.1894v-8.4049h2.0692c1.911 0 3.026 1.362 3.026 3.2025v1.7999zm-19.706 7.9657c4.8168 0 6.886-3.162 6.886-7.5239v-21.011h-4.2992v20.889c0 1.762-0.43789 3.5227-2.4679 3.5227-2.1502 0-2.5489-2.0417-2.5489-3.4417v-20.97h-4.5384v21.33c0 4.8429 2.5489 7.2023 6.967 7.2023l0.001307 0.002614zm-15.607-0.52024c3.3044 0 6.171-2.4012 6.171-7.963 0-3.2822-1.6326-5.5632-3.8221-6.3239v-0.15947c2.2692-0.96074 3.6626-3.2809 3.6626-6.3631 0-5.2024-2.5489-7.2036-6.4089-7.2036h-7.6846v28.013h8.082zm1.2745-19.049c-0.039214 1.9999-1.3542 2.9214-2.5489 2.9214h-2.3084v-7.8036h2.2287c1.911 0 2.7084 0.92022 2.6679 3.1606l-0.039214 1.7215zm0.2379 11.605c0 2.2417-0.91499 3.4025-2.9058 3.4025h-2.1894v-8.4049h2.0705c1.911 0 3.0247 1.362 3.0247 3.2025v1.7999zm-19.348 7.4441c4.1397 0 6.4494-2.1607 6.4494-6.7226v-14.73c0-4.4429-2.3489-6.5631-6.5696-6.5631h-7.4441v28.013h7.5644v0.002614zm1.8705-6.9226c0 1.7607-0.55684 2.7999-2.7868 2.7999h-2.1097v-19.77h2.1502c2.2287 0 2.7868 1.3202 2.7868 2.8012l-0.039214 14.168-0.001307 0.001307zm-24.166 6.92v-28.012h11.824v4.1619h-7.286v7.2023h5.9318v4.1645h-5.9318v8.3238h7.286v4.1619h-11.824v-0.002614z"></path><path data-testid="ds-brandmark" fill="#e41321" d="m27.621 27.225h-5.3279a0.53462 0.53462 0 0 1-0.53331-0.53592v-13.372c0-0.29541 0.2392-0.53462 0.53331-0.53462h4.9397c3.707 0 4.4848 2.1829 4.4848 4.0129 0 1.0588-0.28103 1.8993-0.83918 2.5162 1.3594 0.56076 2.0914 1.8248 2.0914 3.6534 0 2.6679-1.9999 4.2599-5.3488 4.2599m-7.7356 0h-11.066a0.53331 0.53331 0 0 1-0.532-0.53592v-13.372c0-0.29541 0.2379-0.53462 0.532-0.53462h5.1697c3.2286 0 5.1553 1.7385 5.1553 4.6508 0 1.9372-0.97381 3.4587-2.5437 4.0769l3.6822 4.8246a0.53592 0.53592 0 0 1-0.39868 0.88885m0.019607-27.188c-11.037 0-19.986 8.9486-19.986 19.986 0 11.04 8.9486 19.989 19.987 19.989s19.986-8.9486 19.986-19.987-8.946-19.986-19.985-19.986"></path></svg></span>
    <form>
      <input type="text" placeholder=" Search designs and products" class="search left">
    </form>
    <div>
      <mat-icon class="icon">favorite_border</mat-icon>   
      <mat-icon>shopping_cart</mat-icon> 
    </div>   
  </div>
  <div class="menu">
    <!-- Can you explain [matMenuTriggerFor]="menu" what is doing and #menu="matMenu"? -->
    <button mat-button [matMenuTriggerFor]="menu">Clothing</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All clothing</button>
      <button mat-menu-item>Dresses</button>
      <button mat-menu-item>Hoodies & Sweetshirts</button>
      <button mat-menu-item>Leggins</button>
      <button mat-menu-item>Skirts</button>
      <button mat-menu-item>Socks</button>
    </mat-menu>
    <!-- Stickers -->
    <button mat-button [matMenuTriggerFor]="menu">Stickers</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All Stickers</button>
      <button mat-menu-item>Car Stickers</button>
      <button mat-menu-item>Helmet Stickers</button>
      <button mat-menu-item>Hydro Flask Stickers</button>
      <button mat-menu-item>Laptop Stickers</button>
      <button mat-menu-item>Magnets</button>
    </mat-menu>
    <!-- Masks -->
    <button mat-button [matMenuTriggerFor]="menu">Masks</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All Masks</button>
      <button mat-menu-item>Fitted Masks</button>
      <button mat-menu-item>Flat Masks</button>
      <button mat-menu-item>Kids Masks</button>
      
    </mat-menu>
    <!-- Phone cases -->
    <button mat-button [matMenuTriggerFor]="menu">Phone Cases</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All Phone Cases</button>
      <button mat-menu-item>iPhone Cases</button>
      <button mat-menu-item>Samsung Cases</button>
      
    </mat-menu>
    <!-- Wall art -->
    <button mat-button [matMenuTriggerFor]="menu">Wall Art</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All Wall Art</button>
      <button mat-menu-item>Art Board Prints</button>
      <button mat-menu-item>Art Prints</button>
      <button mat-menu-item>Canvas Prints</button>
      <button mat-menu-item>Framed Prints</button>
      <button mat-menu-item>Metal Prints</button>
    </mat-menu>
    <!-- Home & Living -->
    <button mat-button [matMenuTriggerFor]="menu">Home & Living</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All Home & Living</button>
      <button mat-menu-item>Acrylic Blocks</button>
      <button mat-menu-item>Aprons</button>
      <button mat-menu-item>Bath Mats</button>
      <button mat-menu-item>Clocks</button>
      <button mat-menu-item>Coasters</button>
    </mat-menu>
    <!-- Kids & Babies -->
    <button mat-button [matMenuTriggerFor]="menu">Kids & Babies</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All for Kids & Babies</button>
      <button mat-menu-item>Toys</button>
      <button mat-menu-item>Games</button>
      <button mat-menu-item>Clothes</button>
      
    </mat-menu>
    <!-- Accessories -->
    <button mat-button [matMenuTriggerFor]="menu">Accessories</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All Accessories</button>
      <button mat-menu-item>Backpacks</button>
      <button mat-menu-item>Drawstring Bags</button>
      <button mat-menu-item>Duffle Bags</button>
      <button mat-menu-item>Makeup Bags</button>
      <button mat-menu-item>Pins</button>
    </mat-menu>
    <!-- Stationery -->
    <button mat-button [matMenuTriggerFor]="menu">Stationery</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All Items</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
    </mat-menu>
    <!-- Gifts -->
    <button mat-button [matMenuTriggerFor]="menu">Gifts</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All Items</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
    </mat-menu>
    <!-- Explore designs -->
    <button mat-button [matMenuTriggerFor]="menu">Explore designs</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>All Items</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
      <button mat-menu-item>Item</button>
    </mat-menu>
  </div>
  
</div>

我的原型将类似于 Redbubble，因此您可以以 Redbubble 为例。

这是 ts 文件，但我认为没什么可做的，它只是 mat menu Angular 站点中示例的复制粘贴，我也不明白它是如何工作的以及我们如何使用它。在此处输入图像描述

所以，感谢您的时间和帮助：3

PS：另外，如果您知道如何在悬停时制作菜单下拉菜单，请告诉我；）

标签： angulardrop-down-menuangular-material

angular - mat-menu 无法正常工作 - Angular

问题描述

解决方案

推荐阅读