Угловая директива для добавления всплывающей подсказки - PullRequest
Новая
       72

Угловая директива для добавления всплывающей подсказки

0 голосов
/ 23 сентября 2018

У меня есть директива, которая получает идентификатор узла, и она должна отображать сложную подсказку, содержащую html с дополнительной информацией.

Для подсказки я хочу использовать директиву подсказки ngx-bootstrap .Я пытаюсь настроить директиву ngx-bootstrap, используя мою собственную директиву атрибута appNodeInfo, и повторно использую ее в 15 местах.

Но я не знаю, как это сделать: главная проблема состоит в том, чтобы заставить angular признать, что подсказка является директивойа не просто неизвестный атрибут ... 

import { Component, OnInit } from '@angular/core';

@Component({
  inputs: ['instanceId'],
  selector: 'instance-id',
  template: `
    <span appNodeInfo="instanceId">
      {{instanceId}}
    </span>
  `,
  styles: []
})
export class InstanceIdComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

ЭТО В действительности не работает: 

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appNodeInfo]',
  inputs: ['instanceId']
})
export class NodeInfoDirective {
  
  constructor(private el: ElementRef, private renderer: Renderer2) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }

  ngOnInit() {
    this.renderer.setAttribute(this.el.nativeElement, 'tooltip', 'HERE I AM !!');
  }

}

Я читал, что angular 6 поддерживает создание динамических компонентов с помощью ComponentFactoryResolver.Последний комментарий по открытой угловой проблеме, связанный здесь, предполагает, что он решил проблему, не объясняя, как.Вот ссылка: https://github.com/nayfin/tft-library/blob/master/projects/tft-library/src/lib/dynamic-form/dynamic-field.directive.ts Может быть, кто-нибудь может объяснить, как я могу решить проблему с этим или почему это не решение.

...