MatToolTip 在 Angular 中无法正常工作

Question

我在我的一个延迟加载模块中使用 MatToolTip，我没有收到任何错误，但是所有工具提示文本（提供给 matTooltip 属性）都显示在屏幕的左下角，而不是显示在工具提示应该显示。

当我使用 Angular 9 时它工作得很好，但现在我移动了 Annular 11 并且文本不在适当的位置

这是我使用 matToolTip 的 html 代码

 <div
      mat-raised-button
      matTooltip="No changes made"
      [matTooltipDisabled]="active"
      [class.save-active]="active"
      (click)="save.emit()"
      class="save"
 >
  {{ text }}
 </div>

这就是我的 SharedModule 的样子

import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
...,
 imports: [..., MatTooltipModule,],
 exports: [...,  MatTooltipModule,],
})

export class SharedModule {}

这就是我的 AppModule 的样子

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
...,
 imports: [
     ...,     
     BrowserModule,
     BrowserAnimationsModule
 ]
})

export class AppModule {}

任何人都知道可能会发生什么？

Answer 1

尝试在 styles.css 中添加材料 CSS ，如下所示：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";