javascript - hent tekst fra DOM-element og indsæt det i 'title' typescript

Jeg forsøger at skrive en direktiv i Angular2 + TypeScript, som får tooltip til kun at vises, når ellipsis er aktiv (vis komplet tekst pop op kun når den ikke er fuldt vist, og slutter med "..."). Jeg fandt dette svar på StackOverflow:

vis værktøjstippet kun, når udeladelsestegnet er aktivt

Nu prøver jeg at oversætte denne Jquery-funktion:

Til TypeScript. Indtil videre er dette, hvad jeg har:

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[isEllipsisActive]' })

export class IsEllipsisActiveDirective {
constructor(el: ElementRef) {
    if (el.nativeElement.classList.contains('className')) {
         if (this.isEllipsisActive(el.nativeElement)) {
             //el.nativeElement.attributes("title",el.nativeElement.text());
         }
    }
}
 isEllipsisActive(e: any) {
return (e.offsetWidth < e.scrollWidth);
  }
}

Jeg kan ikke finde ud af, hvordan jeg får teksten fra elementet og sender den videre til elementets titel ved hjælp af TypeScript. Nogle idéer?

Tak!

Svar #1

Det ser ud til, at det ikke er sikkert at bruge ElementRef til direkte DOM-adgang ifølge Angular2-dokumentationen. Du kan bruge Renderer sammen med ElementRef til at hente/sætte en DOM-værdi på denne måde:

import {Renderer, ElementRef} from '@angular/core;
...
export class IsEllipsisActiveDirective {
constructor {
  private _renderer: Renderer,
  private _el: ElementRef
} (
  //get value
  this._el.nativeElement.querySelector('div/p/whatever...')
  //set value
  this._renderer(_el.nativeElement.querySelector(tag), 'innerHTML', 'Foo')
)

Håber dette hjælper. Kreditering går til disse Stack Overflow-svar:

  • Hvordan får man adgang til HTML-elementet indefra en Angular2-atributdirektiv
  • få fat i et element i skabelonen

Relaterede artikler