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

【问题标题】：How to add mattooltip by custom directive in Angular如何在 Angular 中通过自定义指令添加 mattooltip
【发布时间】：2018-12-18 16:49:57
【问题描述】：

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

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

【问题讨论】：

mattooltip 已经是指令了，为什么不能用呢？ material.angular.io/components/tooltip/api
简而言之，这是行不通的，因为向元素添加属性与创建指令并将指令附加到元素不同。

标签： javascript angular angular-material angular-material2

【解决方案1】：

其他答案和 cmets 是正确的，顺便说一句，我终于做到了，它正在工作

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

【讨论】：

感谢您的示例帮助了我，您知道如何更改工具提示的默认 UI，我想添加具有复杂数据的特定类型的工具提示，而不仅仅是字符串，并且复杂数据将绑定在工具提示中用户界面

【解决方案2】：

在 Angular 中没有办法做到这一点。密切关注this，如果 Angular 的人可能会这样做，以防他们开始做有意义的工作。

您的另一个选择是为这种情况创建一个动态组件，这对于这种小东西来说很糟糕。我不确定，但它可能会破坏你的 AOT。

【讨论】：