javascript 如何在Angular中通过自定义指令添加mattooltip

kiayqfof 于 2023-05-12 发布在 Java

关注(0)|答案(4)|浏览(142)

我正在创建一个名为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>

在结果中，添加了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>

我尝试添加其他额外的属性，但仍然不起作用。

JavaScript

来源：https://stackoverflow.com/questions/51272037/how-to-add-mattooltip-by-custom-directive-in-angular

4条答案

按热度按时间

kgqe7b3p1#

其他的答案和评论都是正确的，顺便说一句，最后我做了这样的，它的工作

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
        );
    }
}

赞(0）回复(0）举报 2023-05-12

brccelvz2#

这对我很有效。在我的情况下，我需要有一些检查之前，显示'鼠标悬停'事件的工具提示。

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();
    }
}

赞(0）回复(0）举报 2023-05-12

7cwmlq893#

在Angular中没有办法做到这一点。关注this，所以如果Angular的人开始做有意义的工作，他们可能会这样做。
你的另一个选择是为这种情况创建一个动态组件，这对这种小事情很糟糕。我不确定，但它可能会打破你的AOT。

赞(0）回复(0）举报 2023-05-12

rxztt3cl4#

这个对我有用

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
}

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 如何在Angular中通过自定义指令添加mattooltip

4条答案

相关问题

热门标签

最新问答