工具提示问题，MatTooltip 在 Angular 中不起作用 [英] Tooltip issue, MatTooltip not working in Angular

问题描述

我正在尝试在仪表板页面中插入通知工具提示，但该工具提示不起作用.我对 Angular 非常陌生，因此我们将不胜感激.

module.ts

..从@angular/material"导入{MatTooltipModule}；..@NgModule({..MatTooltip 模块..})

component.html

 
<i class="fa fa-bell fa-2x";咏叹调隐藏=真"；matTooltip=工具提示！"></i>

解决方案

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

1. 导入BrowserAnimationsModule 和MatTooltipModule:

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-b​​rowser/animations';从 '@angular/material/tooltip' 导入 { MatTooltipModule };@NgModule({进口:[浏览器动画模块，MatTooltip 模块，//...

2. 向组件添加工具提示

test.component.html

<div matTooltip="Tooltip!">悬停在我身上</div>

3. P.S 如果您尚未安装和导入 HammerJs，您可能需要(Material 将其用于某些动画和触摸手势):
   npm i -Shammerjs
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

I am trying to insert a notifications tooltip in my dashboard page, but the tooltip is not working. I am very new to Angular, so any leads regarding this will be highly appreciated.

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>

解决方案

To use Angular-Material Tooltip you will need:

1. Import the BrowserAnimationsModule and MatTooltipModule:

app.module.ts

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

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

2. Add tooltip to your component

test.component.html

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

3. P.S If you haven't already installed and imported HammerJs you may need to (Material uses it for some animations and touch gestures):
   npm i -S hammerjs
npm i -D @types/hammerjs
   

And in your app.module.js import hammerjs:

import 'hammerjs'; 

To view full working example see: https://stackblitz.com/angular/keqjqmxbrbg

Update

I found a memory leak in my application, due to extensive use of mat-tooltip (in a loop). This memory leak can be fixed by removing HammerJS.
For more info and other possible solutions (instead of removing HammerJS) see: https://github.com/angular/material2/issues/4499

这篇关于工具提示问题，MatTooltip 在 Angular 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！