angular - 工具提示问题，MatTooltip 在 Angular 中不起作用

Question

我正在尝试在我的仪表板页面中插入通知工具提示，但该工具提示不起作用。我是 Angular 的新手，因此非常感谢任何与此相关的线索。

module.ts

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

@NgModule({
..
MatTooltipModule
..})

component.html

    <div class="notifications">
        <i class="fa fa-bell fa-2x" aria-hiden="true" matTooltip="Tooltip!"></i>
    </div>

Answer 1

要使用 Angular-Material Tooltip，您需要:

1. 导入 BrowserAnimationsModule 和 MatTooltipModule:

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatTooltipModule,
    // ...

1. 将工具提示添加到您的组件

test.component.html

<div matTooltip="Tooltip!">Hover me</div>

1. P.S 如果您还没有安装和导入 HammerJs，您可能需要(Material 使用它来制作一些动画和触摸手势):
   npm i -S hammerjs
npm i -D @types/hammerjs
   

然后在你的 app.module.js 中导入 hammerjs:

import 'hammerjs'; 

要查看完整的工作示例，请参阅:https://stackblitz.com/angular/keqjqmxbrbg

更新

由于大量使用 mat-tooltip(在循环中)，我在我的应用程序中发现了内存泄漏。可以通过删除 HammerJS 来修复此内存泄漏。
有关更多信息和其他可能的解决方案(而不是删除 HammerJS)，请参阅: https://github.com/angular/material2/issues/4499