Question

我正在使用FullCalendar（Angular版本），我想在资源列表上添加一个glyphicon，将其悬停时会显示angular的MatTooltip。现在的问题是，使用element.setAttribute('matTooltip')并没有减少它。它已转换为mattooltip，将无法使用。

所以我在考虑是否有可能在新的HTMLDomElement上实例化matTooltip

let departmentInfoSpan = document.createElement('span');
    departmentInfoSpan.setAttribute('matTooltip', 'sample tooltip');

上面的代码将生成一个html元素，如下所示：

<span mattooltip="sample tooltip"><span>?</span></span>

我希望span元素在悬停时会显示工具提示。

Answer 1

它不起作用，因为在编译时有角度会读取matTooltip，它在其中添加了CSS和其他属性以使其正常工作，并且在运行时缺少此编译动作。

因此，如果要动态添加工具提示，则还有其他替代解决方案

1。使用* ngIf指令确定要显示的元素。

例如：

<span matTooltip="Yes tooltip" *ngIf="show"></span>
<span matTooltip="No tooltip" *ngIf="!show"></span>

2。为工具提示创建自定义指令

Answer 2

Anil Kumar Arya为我指明了正确的方向，这使我想到了post。

我能够使用Angular的ComponentPortal将一个组件（包含我需要的工具提示）附加到DOM，就像这样：

import { ComponentFactoryResolver, ApplicationRef } from '@angular/core';
import { ComponentPortal, DomPortalHost } from '@angular/cdk/portal';

constructor(
    protected componentFactoryResolver: ComponentFactoryResolver,
    protected appRef: ApplicationRef,
    protected injector: Injector
) {}
...

myfunction (): void {
    let bodyPortalHost = new DomPortalHost(
      eventRenderInfo.el.querySelector('.fc-content'), // Target the element where you wish to append your component
      this.componentFactoryResolver,
      this.appRef,
      this.injector);

    let componentToAppend = new ComponentPortal(MyComponentThatHasTheElementWIthTooltip);
    let referenceToAppendedComponent = bodyPortalHost.attach(componentToAppend);
}

在Angular中，是否可以将MatTooltip应用于在运行时创建的元素？

2 个答案: