我正在尝试在仪表板页面中插入通知工具提示,但该工具提示不起作用。我对 Angular 非常陌生,因此任何有关此问题的线索都将受到高度赞赏。
module.ts
..
import {MatTooltipModule} from '@angular/material';
..
@NgModule({
..
MatTooltipModule
..})
组件.html
<div class="notifications">
<i class="fa fa-bell fa-2x" aria-hiden="true" matTooltip="Tooltip!"></i>
</div>
要使用 Angular-Material Tooltip,您需要:
- 导入
BrowserAnimationsModule
and MatTooltipModule
:
应用程序模块.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
imports: [
BrowserAnimationsModule,
MatTooltipModule,
// ...
- 向您的组件添加工具提示
测试.component.html
<div matTooltip="Tooltip!">Hover me</div>
- P.S 如果您尚未安装并导入 HammerJs,您可能需要(材质将其用于某些动画和触摸手势):
npm i -S hammerjs
npm i -D @types/hammerjs
在你的 app.module.js 中导入hammerjs:
import 'hammerjs';
要查看完整的工作示例,请参阅:https://stackblitz.com/angular/keqjqmxbrbg https://stackblitz.com/angular/keqjqmxbrbg
Update
由于大量使用 mat-tooltip (在循环中),我在应用程序中发现内存泄漏。可以通过删除 HammerJS 来修复此内存泄漏。
有关更多信息和其他可能的解决方案(而不是删除 HammerJS),请参阅:https://github.com/angular/material2/issues/4499 https://github.com/angular/material2/issues/4499
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)