在Angular中，是否可以在运行时创建的元素上应用MatTooltip? [英] In Angular, is it possible to apply MatTooltip on an element that was created on runtime?

问题描述

我正在使用FullCalendar(Angular版本)，我想在资源列表上添加一个glyphicon，将其悬停时会显示angular的MatTooltip.现在的问题是，使用element.setAttribute('matTooltip')不能剪切它.它已转换为mattooltip，将无法正常工作.

I'm using FullCalendar (angular version) and I wanted to add a glyphicon on the resources list that when hovered, shows angular's MatTooltip. The issue now is that using element.setAttribute('matTooltip') is not cutting it. It's getting converted to mattooltip which won't work.

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

So I was thinking if there is a possible way of instantiating matTooltip on new HTMLDomElement

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

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

The code above results to an html element like this:

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

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

I was expecting the span element to be showing the tooltip when hovered.

推荐答案

Anil Kumar Arya 指出了我朝着正确的方向引导了我去这个帖子

Anil Kumar Arya pointed me in the right direction which led me to this post.

我能够使用Angular的ComponentPortal将组件(包含我需要的工具提示)附加到DOM，就像这样:

I was able to append a component (that contained the tooltip that I needed) to the DOM using Angular's ComponentPortal just like so:

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！