Question

我有一条指令，该指令接收节点ID，它应该显示一个包含附加信息的html的复杂工具提示。

对于工具提示，我想使用ngx-bootstrap tooltip directive。我尝试使用自定义的appNodeInfo属性指令来自定义ngx-bootstrap指令，并在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 !!');
  }

}

我读到Angle 6支持通过ComponentFactoryResolver创建动态组件。关于此处链接的开放角度问题的最后评论表明，他解决了问题而未解释如何做。参考如下：https://github.com/nayfin/tft-library/blob/master/projects/tft-library/src/lib/dynamic-form/dynamic-field.directive.ts 也许有人可以解释我如何解决此问题或为什么它不是解决方案。

Answer 1

只需使用“标题”而不是“工具提示”。

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

Angular Directive添加工具提示

1 个答案: