角度 15 中的 ng-bootstrap 14 工具提示问题

Question

我正在将 Angular 项目从 14 升级到 15，包括 ng-bootstrap 从 13.1.1 升级到 14.1.0.

除了 ng-bootstrap 中工具提示组件的问题外，大部分升级进展顺利。我创建了一个精简的 Stackblitz 来演示这个问题：

https://stackblitz.com/edit/angular-fagut4

问题似乎是这样的。如果我创建一个内部有 ngbTooltip 调用的组件（独立或其他），就像这个非常简单的例子：

import { Component, Input } from '@angular/core';
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-tooltip-test',
  standalone: true,
  imports: [NgbTooltipModule],
  template: `
  <span [ngbTooltip]="tooltipText">HOVER ME</span>`,
})
export class NgbdTooltipTest {
  @Input() tooltipText!: string;
}

...然后我尝试从父级调用该组件，如下所示：

before<ngbd-tooltip-test tooltipText="here is a tooltip"></ngbd-tooltip-test
  >text after

...然后在悬停时，

after

文本换行到下一行。这种行为在 Angular 14/ng-bootstrap 13.1.1 中没有发生。

Stackblitz 示例的根元素为

span

，但我已将其更改为

a

和

button

，我看到了相同的结果。

要么我在这里遗漏了一些非常愚蠢的东西，要么现在就坏了。还有其他人经历过吗？

提前致谢！

Answer 1

我遇到过像以前一样的问题，以至于我养成了每次使用

ngbTooltip

指令时自动添加属性 container="body" 的习惯。对您的示例执行此操作使问题消失了。除了为每个用法添加属性之外，还可以使用 NgbTooltipConfig 服务全局设置此值。

如果这不可能，经过一些实验后我发现将 host 元素的 css display 属性设置为 contents 也可以做到这一点。

这可以为问题提供线索，因为最初主机的 display 属性是 inline。鉴于工具提示指令添加的元素是 block 元素，渲染可能会导致问题，因为内联元素不应该包含块元素。

@Component({
  selector: 'ngbd-tooltip-test',
  standalone: true,
  styles: [':host { display: contents; }'],
  imports: [NgbTooltipModule],
  template: `
  <span [ngbTooltip]="tooltipText" [closeDelay]="600000">HOVER ME</span>`,
})