如何在Angular属性指令中设置ngbTooltip？

你遇到的问题根源在于：ngbTooltip是Angular指令，不是普通HTML属性。用Renderer2.setAttribute只是给DOM元素添加了一个属性，但Angular不会为这个动态添加的属性创建NgbTooltip指令实例，因此提示框无法正常触发。

下面是几种可行的解决方案：

方案一：通过组件Host绑定指令（推荐） #

直接在组件元数据中用host配置绑定ngbTooltip，让Angular自动处理指令初始化：

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

@Component({
  selector: '[app-mybutton]',
  templateUrl: './mybutton.html',
  host: {
    '[ngbTooltip]': 'tooltipText'
  }
})
export class MyButtonComponent {
  // 可以固定内容，也可以改成@Input()让外部传入
  private tooltipText = 'some text';
}

如果需要支持外部自定义提示文本，改成输入属性即可：

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

@Component({
  selector: '[app-mybutton]',
  templateUrl: './mybutton.html',
  host: {
    '[ngbTooltip]': 'tooltipText'
  }
})
export class MyButtonComponent {
  @Input() tooltipText = '默认提示文本';
}

使用时直接传值：

<button app-mybutton tooltipText="自定义提示"></button>

方案二：手动实例化NgbTooltip指令 #

如果必须动态创建指令，可以手动实例化NgbTooltip并触发初始化逻辑：

import {Component, ElementRef, Injector, OnInit} from '@angular/core';
import {NgbTooltip} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: '[app-mybutton]',
  templateUrl: './mybutton.html'
})
export class MyButtonComponent implements OnInit {

  constructor(private el: ElementRef, private injector: Injector) {}

  ngOnInit() {
    // 创建NgbTooltip实例
    const tooltip = new NgbTooltip(this.el, this.injector);
    // 设置提示内容
    tooltip.ngbTooltip = 'some text';
    // 手动触发指令初始化
    tooltip.ngOnInit();
  }
}

注意事项 #

• 确保你的Angular模块已经导入了NgbTooltipModule，否则ngbTooltip指令本身就无法被识别：

import {NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    // ...其他模块
    NgbTooltipModule
  ]
})
export class YourModule {}

内容的提问来源于stack exchange，提问作者Galdor