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

问题描述

我正在尝试在我的仪表板页面中插入通知工具提示，但是该工具提示不起作用.我是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>
 

解决方案

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

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屋！