В Angular, возможно ли применить MatTooltip к элементу, который был создан во время выполнения?

Question

Я использую FullCalendar (угловая версия), и я хотел добавить глифик в список ресурсов, который при наведении курсора показывает MatTooltip Angular.Проблема сейчас в том, что использование element.setAttribute('matTooltip') не обрезает егоОн конвертируется в mattooltip, который не будет работать.

Поэтому я подумал, есть ли возможный способ создания экземпляра matTooltip для нового HTMLDomElement

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

Приведенный выше код приводит к HTML-элементу, подобному следующему:

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

Я ожидал, что элемент span покажет всплывающую подсказку при наведении.

Answer 1

Это не работает, потому что angular во время компиляции читает matTooltip, который добавил туда вместе с CSS и другими атрибутами, чтобы заставить его работать, и это действие компиляции отсутствует во время выполнения.

Итак, если вы хотите динамически добавить всплывающую подсказку, есть другое альтернативное решение

1. Используйте директиву * ngIf, чтобы определить элемент для отображения.

Например:

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

2. Создайте пользовательскую директиву для всплывающей подсказки

Answer 2

Анил Кумар Арья указал мне правильное направление, которое привело меня к этому сообщению .

Мне удалось добавить компонент (содержащий нужную подсказку) в DOM, используя Angular ComponentPortal, вот так:

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