工具提示问题,MatTooltip无法在Angular中工作

Question

我正在尝试在仪表板页面中插入通知工具提示,但工具提示无法正常工作.我是Angular的新手,所以任何关于此的线索都将受到高度赞赏.

module.ts

..从'@ angular/material'导入{MatTooltipModule}; ..

@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,
    // ...

2. 将工具提示添加到组件

test.component.html

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

3. PS如果您尚未安装和导入HummerJs,您可能需要(材料将其用于某些动画和触摸手势):
   npm i -S hammerjs
npm i -D @types/hammerjs
   

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

import 'hammerjs'; 

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

更新

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

Answer 2

我有一个类似的问题。当我添加Material主题CSS时，此问题已修复。

检查控制台以查看是否有警告。尝试将主题CSS添加到父文件中。

Answer 3

如果你看到一个错误，表明没有找到材质的主题，添加一个材质主题，比如这个，到你的主 CSS 文件的第一行；

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';