我正在创建一个名为 TooltipDirective 的自定义指令,它将向每个主机元素添加 matTooltip,代码如下
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 中,我有两个元素来比较结果
<i class="material-icons" tooltip="Test Tooltip">reply_all</i>
<i class="material-icons" matTooltip="Test Tooltip">reply_all</i>
在结果 html 中添加了
tooltip
和 mattooltip
属性,但不显示工具提示。
渲染的 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>
我尝试添加其他额外属性,但仍然不起作用。
其他答案和评论是正确的,顺便说一句,我终于做到了这样并且它正在工作
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/tooltip';
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
);
}
}
这对我有用。就我而言,在显示“鼠标悬停”事件的工具提示之前,我需要进行一些检查。
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';
@Directive({
selector: '[customTooltip]',
providers: [MatTooltip]
})
export class CustomTooltipDirective {
@Input() tooltipText: string;
constructor(private elementRef: ElementRef, private tooltip: MatTooltip) {}
@HostListener('mouseover') mouseover() {
this.tooltip.message = this.tooltipText;
this.tooltip.show();
}
@HostListener('mouseleave') mouseleave() {
this.tooltip.hide();
}
}
这个对我有用
import { Directive, Input } from '@angular/core';
import{ MatTooltip } from '@angular/material/tooltip';
@Directive({
selector: '[appTooltip]',
exportAs: 'appTooltip',
})
export class SharedUiTooltipDirective extends MatTooltip {
@Input() appTooltip!: string
override get message(): string {
return this.appTooltip
}
}
然后,如果您想覆盖其他内容,例如禁用状态:
@Input() isDisabled?: boolean
override get disabled(): boolean {
return this.isDisabled ?? false
}
Angular 中没有办法做到这一点。请密切关注this,所以如果 Angular 人员开始做有意义的工作,他们是否会这样做。
您的另一个选择是为这种情况创建一个动态组件,这对于这种小事情来说很糟糕。我不确定,但它可能会破坏你的 AOT。
对于那些想要使用普通 JS 以编程方式执行此操作的人:
const buttonWithTooltip = document.createElement('button');
buttonWithTooltip.textContent = 'My Tooltip Button';
buttonWithTooltip.setAttribute('matTooltip', 'Tooltip Text Here');
buttonWithTooltip.classList.add('mat-button', 'mat-tooltip');
this.parentElementRef.nativeElement.appendChild(buttonWithSpan);