如何在 Angular 中将工具提示动态应用到元素的动态文本内容的一部分？

所以我有这个包含字典的 json 文件。

definitions.json

{
  "word": "Some definition.",
  "an expression": "Some other definition."
}

我的应用程序中的组件可能与此类似。

my.component.ts

  @Component({
    selector: 'my',
    template: `
      <h1>{{ someTitleText }}</h1>
      <p>{{ someText }}</p>
    `

  })
  export class MyComponent {
    @Input() someTitleText: string;
    @Input() myText: string;
  }

我想当用户将鼠标悬停在字典文件中存在的单词上时显示工具提示，并且我需要工具提示来显示相应的定义。

创建一个解析函数来检测字符串中是否存在单词或表达式以及在何处出现是相对简单的。我特别需要帮助的地方是找出在检测到元素内的特定单词或表达式后将工具提示行为添加到该元素的 Angular 方式。

ngx-bootstrap 已经有一个tooltip https://valor-software.com/ngx-bootstrap/#/tooltip#basic我想使用它而不是从头开始实现一个。

我需要的是能够以某种方式（结构指令、属性指令、管道、其他？？？）选择性地将我的应用程序中的所有元素指定为具有此行为。

换句话说，我需要一种可重用的方式来告诉 Angular“嘿，这个元素就在这里，我希望你检查它是否有一些文本内容，以及其中一些文本是否存在于我的字典中，以及是否是我想要的您可以让用户将鼠标悬停在该单词或表达式上，并显示包含该单词或表达式的适当定义的工具提示。”

与 Angular 指令相比，在运行时动态创建 Angular 组件很容易。您所要做的就是创建一个包装器 Angular 组件（例如，TooltipComponent需要 2 个输入，即 displayText 和 tooltipText），将 ngx-bootstrap 工具提示指令应用于您选择的某些 HTML 元素。然后为字典中存在的单词动态渲染此包装器组件。

我相信下面的代码片段中的所有内容都是不言自明的。

应用程序组件.ts

@Component({
  selector: "demo-tooltip-basic",
  template: `<p #para></p>`
})
export class AppComponent implements AfterViewInit {
  @ViewChild("para", { static: false }) para: ElementRef<HTMLElement>;

  text = `I'm in love with the shape of you!`;
  dict = {
    love: "like something",
    shape: "blah!!!",
    something: "..."
  };

  ...

  ngAfterViewInit() {
    this.text.split(" ").forEach(word => {
      if (this.dict[word]) {
        let factory = this.resolver.resolveComponentFactory(TooltipComponent);
        let ref = factory.create(this.injector);
        ref.instance.text = `${word} `;
        ref.instance.tooltip = this.dict[word];
        ref.changeDetectorRef.detectChanges();
        this.renderer.appendChild(
          this.para.nativeElement,
          ref.location.nativeElement
        );
      } else {
        this.renderer.appendChild(
          this.para.nativeElement,
          this.renderer.createText(`${word} `)
        );
      }
    });
  }
}

要查看此应用程序的完整代码，请使用此 stackblitz 链接（https://stackblitz.com/edit/dynamic-tooltips https://stackblitz.com/edit/dynamic-tooltips).

我希望您可以进一步改进这个基本实现以满足您的需求。有关动态创建 Angular 组件的更多信息，请查看此article https://dzone.com/articles/how-to-dynamically-create-a-component-in-angular.

Note:建议使用Renderer2Angular 提供的 API 用于在运行时安全地创建 HTML 元素。