如何在Angular中将工具提示动态地应用于元素的动态文本内容的一部分? [英] How to dynamically apply a tooltip to part of an element's dynamic text content in Angular?

问题描述

所以我有一个包含字典的json文件.

So I have this json file containing a dictionary.

definitions.json

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

我的整个应用程序中都有一些与此类似的组件.

And I have components throughout my app that may be similar to this.

my.component.ts

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

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

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

I want to display a tooltip when the user will hover over a word that is present in the dictionary file and I need the tooltip to display the corresponding definition.

使解析函数检测字符串中是否存在单词或表达式是相对琐碎的.我特别需要帮助的地方是找出被检测到后在元素内的特定单词或表达式上添加工具提示行为的Angular方法.

Making a parsing function to detect if and where a word or expression is present in a string is relatively trivial. Where I specifically need help is in figuring out the Angular way of adding the tooltip behavior to that specific word or expression inside the element once it has been detected.

ngx-bootstrap已经具有 tooltip ，我想而不是从头实现一个.

ngx-bootstrap already has a tooltip and I would like to use that one rather than implement one from scratch.

我需要的是以某种方式(结构指令，属性指令，管道，其他???)选择性地将我整个应用程序中的元素指定为具有这种行为的能力.

What I need is the ability to somehow (structural directive, attribute directive, pipe, other???) selectively designate elements all over my app as having this behavior.

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

In other words, I need a reusable way to tell Angular "Hey, this element right here, I want you to check if it has some text content, and if some of that text is present in my dictionary, and if it is I want you to make it possible for the user to hover over that word or expression and for a tooltip to appear containing the appropriate definition for that word or expression."

推荐答案

与Angular指令相比，在运行时动态创建Angular组件很容易.您所需要做的就是创建一个包装器Angular组件(例如， TooltipComponent ，它接受2个输入，即displayText和tooltipText)，并将ngx-bootstrap tooltip指令应用于您选择的某些HTML元素.然后，针对字典中存在的单词动态渲染此包装器组件.

It is easy to create an Angular component dynamically at run-time compared to an Angular directive. All you have to do is to create a wrapper Angular component (say, TooltipComponent that takes 2 inputs namely displayText and tooltipText) that applies the ngx-bootstrap tooltip directive to some HTML element of your choice. Then render this wrapper component dynamically for the word that is present in your dictionary.

我相信以下代码段中的所有内容都是不言自明的.

I believe everything in the below code snippet is self-explanatory.

app.component.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 ).

To view the complete code of this app, use this stackblitz link (https://stackblitz.com/edit/dynamic-tooltips).

我希望您可以进一步改进此基本实现以适合您的需求.有关动态创建Angular组件的更多信息，请查看此文章.

I hope you can further improve this basic implementation to suit your needs. For more information on creating Angular components dynamically, view this article.

注意:建议使用Angular提供的 Renderer2 API在运行时安全地创建HTML元素.

Note: It is recommended to use Renderer2 API provided by the Angular to safely create HTML elements at runtime.

这篇关于如何在Angular中将工具提示动态地应用于元素的动态文本内容的一部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！