我正在创建一个名为TooltipDirective的自定义指令,whihc会将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>
我尝试添加其他额外属性,但仍然无法正常工作。
答案 0 :(得分:2)
其他答案和评论是正确的,顺便说一句,我终于做到了,它可以正常工作
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
);
}
}
答案 1 :(得分:0)
在Angular中无法实现。请留意this,所以如果Angular的人愿意这样做,以防他们开始做有意义的工作。
您的另一个选择是为这种情况创建一个动态组件,以吸引这类小事情。我不确定,但这可能会破坏您的AOT。