我试图在悬停/点击某个图标、按钮时创建下拉菜单,但什么都没有发生
这是我的Home PageComponent,我try 了普通和查看子项的方法,但仍然不起作用
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>
Typescript
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';
}
and app.component.HTML
<app-homepage></app-homepage>
当我try 在Home PageComponent或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