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，您需要：

导入BrowserAnimationsModule和MatTooltipModule：

<强> app.module.ts

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

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

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

<强> test.component.html

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

P.S如果您尚未安装和导入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';

Answer 4

问题出在import语句中这是正确的方法，

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

Answer 5

看到它是这样的，如果您有单独的模块可以进行延迟加载或其他操作，则应在此处重新导入MatTooltipModule。

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

5 个答案:

更新