mat-menu 未在 Angular 17.2.3 中显示

Question

我尝试在悬停/单击某个图标、按钮时创建一个下拉菜单，但没有任何反应

这是我的 homePageComponent，我尝试了普通方法和查看子方法，但仍然不起作用

html

<button mat-icon-button [matMenuTriggerFor]="clickHoverMenu" 
    #clickHoverMenuTrigger="matMenuTrigger" (mouseover)="openOnMouseOver()">
    <mat-icon>notifications</mat-icon>
  </button>
  
  <mat-menu #clickHoverMenu="matMenu">
    <button mat-menu-item>New items</button>
    <button mat-menu-item>New items</button>
    <button mat-menu-item>New items</button>

  </mat-menu>

打字稿

import { Component,ViewChild } from '@angular/core';

import { CommonModule } from '@angular/common';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'app-homepage',
  standalone: true,
  imports: [
    CommonModule,
    MatMenuModule,
    MatIconModule,
    MatInputModule,
    MatButtonModule,
    MatMenuTrigger,
    ],
  templateUrl: './homepage.component.html',
  styleUrl: './homepage.component.css'
})
export class HomepageComponent {
  @ViewChild('clickHoverMenuTrigger') clickHoverMenuTrigger!: MatMenuTrigger;

  openOnMouseOver() {
    this.clickHoverMenuTrigger.openMenu();
  }
}

这是我的 app.component.ts 文件

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

import {HomepageComponent} from './homepage/homepage.component';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HomepageComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'project';
}

和app.component.html

<app-homepage></app-homepage>

当我尝试在 homePageComponent 或 appComponent 中添加 browserModule、browserAnimationsModule、noopAnimationsMoudle 时，它显示此错误

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

import {HomepageComponent} from './homepage/homepage.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HomepageComponent,BrowserModule, BrowserAnimationsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'project';
}

NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
    at _BrowserModule (c:/Users/MyPC/ngocmai/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:1258:13)
    at Object.BrowserModule_Factory (c:/Users/MyPC/ngocmai/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:1282:14)
    at Object.factory (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:5338:38)
    at eval (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:5239:43)
    at runInInjectorProfilerContext (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:3644:9)
    at R3Injector.hydrate (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:5238:17)
    at R3Injector.get (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:5106:33)
    at injectInjectorOnly (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:3831:40)
    at ɵɵinject (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:3837:42)
    at useValue (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:4880:73
Click outside, press Esc key, or fix the code to dismiss.

这是我的应用程序版本

Angular CLI: 17.2.2
Node: 18.13.0      
Package Manager: npm 9.4.0
OS: win32 x64

Angular: 17.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1702.2
@angular-devkit/build-angular   17.2.2
@angular-devkit/core            17.2.2
@angular-devkit/schematics      17.2.2
@angular/cdk                    17.2.1
@angular/cli                    17.2.2
@angular/material               17.2.1
@angular/ssr                    17.2.2
@schematics/angular             17.2.2
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.4

Answer 1

import { provideAnimations } from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent, {
providers: [
  provideAnimations()
]})

将其添加到您的 main.ts 文件中