Angular项目中Bootstrap tooltip的title属性无法渲染ng-template内容

问题根源 #

1. 原生Bootstrap v4的tooltip是独立于Angular生态的jQuery实现组件，无法识别Angular的TemplateRef类型对象：你代码中#tipContent拿到的是Angular模板引用对象，直接绑定给title属性时，会被默认转为[object Object]字符串输出，这就是你看到异常内容的核心原因。
2. 原生Bootstrap tooltip不支持解析Angular模板语法：哪怕你能把ng-template内容传进去，模板里的*ngFor、插值表达式{{}}也无法被原生Bootstrap识别渲染。
3. Angular默认的安全过滤机制会转义HTML字符串：就算你自己拼接了HTML字符串传入，未经过安全标记的内容会被转义为纯文本，就算开了data-html="true"也无法正常渲染标签。

可行解决方案 #

方案1：使用Angular适配的Bootstrap组件库（推荐） #

直接使用@ng-bootstrap/ng-bootstrap或者ngx-bootstrap这类Angular原生适配的Bootstrap组件库，无需依赖jQuery，原生支持TemplateRef作为tooltip内容，你写的ng-template可以直接复用，无需修改模板逻辑：

1. 安装和你的Angular、Bootstrap版本匹配的对应组件库
2. 导入Tooltip对应的功能模块到你的业务模块
3. 修改按钮代码如下即可：

<button type="button" class="btn btn-secondary" placement="bottom" [ngbTooltip]="tipContent">
  Tooltip on bottom
</button>

模板里的#tipContent不需要任何修改，内部的*ngFor、插值都可以正常运行。

方案2：沿用原生Bootstrap tooltip，适配Angular逻辑 #

如果不想引入新的组件库，可以基于你已经写的getCustomToolTip方法做适配修改：

1. 引入Angular的Dom安全处理服务，标记HTML内容为安全内容，避免被转义
2. 在视图渲染完成后手动初始化Bootstrap tooltip
   修改后的代码如下：

app.component.ts

import { Component, AfterViewInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
// 项目引入jQuery后可直接声明，未引入的话可以用原生Bootstrap JS方法初始化
declare var $: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  dataArray: any[]=[
    {value:'Val 1'},
    {value:'Val 2'},
    {value:'Val 3'}
  ];

  constructor(private sanitizer: DomSanitizer) {}

  ngAfterViewInit() {
    // 手动初始化所有tooltip
    $('[data-toggle="tooltip"]').tooltip();
  }

  // 返回经过安全标记的HTML字符串
  getCustomToolTip(): SafeHtml {
    let items = ''
    for(let ob of this.dataArray) {
       items = items + '<tr><td>' + ob.value + '</td></tr>'
    }
    const tooltip = `<table>
      <thead>
        <tr>
          <th>Current Value</th>
        </tr>
      </thead>
      <tbody>
        ${items}
      </tbody>
    </table>`
    return this.sanitizer.bypassSecurityTrustHtml(tooltip);
  }
}

app.component.html

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" data-html="true" [title]="getCustomToolTip()">
  Tooltip on bottom
</button>

不需要再保留之前的ng-template代码，原生Bootstrap无法识别该模板内容。

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