javascript - Angular variables

Question

I've got a line of text right now, and when that line of text is being overflown something gets set to true which let's me load in a tooltip! Code below:

Template

<div>
   <p #tooltip [tooltip]="/* ShowToolTipSomeHow? ? name : null */" delay="300">{{name}}</p>
</div>

This is where it should check if it should show the tooltip or not. As you can see it should somehow detect if the tooltip should be shown or not, I have no idea how and that's my question right now.

Component

@ViewChildren('tooltip') private tooltips!: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    this.tooltips.changes.subscribe((tts: QueryList<ElementRef>) => {
      tts.forEach((tooltip, index) => {
        this.checkTooltipTruncated(tooltip);
      });
    });
  }

  private checkTooltipTruncated(tooltip: ElementRef) {
    // Checks if the text has overflown
    const truncated = this.isTextTruncated(tooltip);

    if (truncated) {
      // Change the ShowToolTipSomehow? value?
    }
  }

In the component it somehow changes some value that the tooltip can detect so that it can update itself to hide the tooltip. The additional problem is that it's not 1 tooltip to change, but infinite tooltips (so basically 1 or more).

My question is, how would I do this because I'm pretty stuck.

Answer 1

等待大神解答