本文介绍了如何通过 Angular 中的自定义指令添加 mattooltip的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在创建一个名为 TooltipDirective 的自定义指令,它将向每个宿主元素添加 matTooltip,代码如下
I am creating a custom directive called TooltipDirective whihc is going to add matTooltip to every host element, code is like below
import { Directive, ElementRef, Input, OnInit, Renderer } from '@angular/core';
@Directive({
selector: '[tooltip]'
})
export class TooltipDirective implements OnInit
{
@Input() tooltip: string;
constructor(private hostElement: ElementRef, private renderer: Renderer)
{
}
ngOnInit()
{
this.renderer.setElementAttribute(this.hostElement.nativeElement, 'matTooltip', this.tooltip);
}
}
在我的 html 中,我有两个元素来比较结果
In my html I have two elements to compare the result
<i class="material-icons" tooltip="Test Tooltip">reply_all</i>
<i class="material-icons" matTooltip="Test Tooltip">reply_all</i>
在结果 html tooltip
和 mattooltip
属性被添加,但它不显示工具提示.
in the result html tooltip
and mattooltip
attributes are added but it doesn't show the tooltip.
渲染的html如下
<i _ngcontent-c10="" class="material-icons" tooltip="Test Tooltip" mattooltip="Test Tooltip" ng-reflect-tooltip="Test Tooltip">reply_all</i>
<i _ngcontent-c10="" class="material-icons" mattooltip="Test Tooltip" aria-describedby="cdk-describedby-message-1" cdk-describedby-host="" ng-reflect-message="Test Tooltip">reply_all</i>
我尝试添加其他额外属性,但仍然无效.
I tried adding other extra attributes but still doesn't work.
推荐答案
其他答案和评论都是正确的,顺便说一句,最后我做到了,并且正在运行
The other answer and comments are correct, btw finally I made it like this and it's working
import { Directive, ElementRef, Inject, Input, NgZone, Optional, ViewContainerRef } from '@angular/core';
import
{
MAT_TOOLTIP_DEFAULT_OPTIONS,
MAT_TOOLTIP_SCROLL_STRATEGY,
MatTooltip,
MatTooltipDefaultOptions
} from '@angular/material';
import { AriaDescriber, FocusMonitor } from '../../../../../node_modules/@angular/cdk/a11y';
import { Directionality } from '../../../../../node_modules/@angular/cdk/bidi';
import { Overlay, ScrollDispatcher } from '../../../../../node_modules/@angular/cdk/overlay';
import { Platform } from '../../../../../node_modules/@angular/cdk/platform';
@Directive({
selector: '[tooltip]',
exportAs: 'tooltip'
})
export class TooltipDirective extends MatTooltip
{
@Input()
get tooltip()
{
return this.message;
}
set tooltip(value: string)
{
this.message = value;
}
constructor(
_overlay: Overlay,
_elementRef: ElementRef,
_scrollDispatcher: ScrollDispatcher,
_viewContainerRef: ViewContainerRef,
_ngZone: NgZone,
_platform: Platform,
_ariaDescriber: AriaDescriber,
_focusMonitor: FocusMonitor,
@Inject(MAT_TOOLTIP_SCROLL_STRATEGY) _scrollStrategy: any,
@Optional() _dir: Directionality,
@Optional() @Inject(MAT_TOOLTIP_DEFAULT_OPTIONS)
_defaultOptions: MatTooltipDefaultOptions)
{
super(
_overlay,
_elementRef,
_scrollDispatcher,
_viewContainerRef,
_ngZone,
_platform,
_ariaDescriber,
_focusMonitor,
_scrollStrategy,
_dir,
_defaultOptions
);
}
}
这篇关于如何通过 Angular 中的自定义指令添加 mattooltip的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!