Wie Anfangswert in der Richtlinie Eigenschaft festlegen

Question

In diesem plunker: ich ein Attribut Richtlinie myTrimmer genannt haben, die lange Text trimmt:

, die für statische Text

<div myTrimmer="10">some longgggg texttttttttttttttt</div> 

gut funktioniert, aber funktioniert nicht für eine interpoliert:

<div myTrimmer="10">{{myText}}</div> 

das bedeutet, es leere Zeichenfolge anstelle von myText in Zeile nimmt

this.originalValue = this.el.nativeElement.innerHTML;

Hier wird eingestellt Eigentum der Richtlinie:

set myTrimmer(value: string) { 
     this.originalValue = this.el.nativeElement.innerHTML; 
     this.length = +value; 
     if (+value < this.el.nativeElement.innerHTML.length) 
      this.el.nativeElement.innerHTML = this.el.nativeElement.innerHTML.substring(0, value) + '...'; 
    } 

Answer 1

Ich nehme an, dass diese Art und Weise Sie AfterViewInit Veranstaltung wie diese warten müssen bearbeitet bei dieser aktualisierten plunkr https://plnkr.co/edit/MccvTyQxSpcgO6Tj99QX?p=preview

Answer 2

Sein, weil Winkel nicht {{myText}} noch kompiliert hat. Um die {{myText}} eckig kompilieren zu können, müssen Sie die Trimmerfunktion aufschieben. um das zu tun, dass Sie Javascript setTimeout Funktion wie folgt verwendet werden: auch

export class MyTrimmer { 
    myTrimmer: string; 
    ngAfterViewInit() { 
    this.originalValue = this.el.nativeElement.innerHTML; 
    console.log(this.originalValue); 
    this.length = +this.myTrimmer; 
    if (+this.myTrimmer < this.el.nativeElement.innerHTML.length) 
     this.el.nativeElement.innerHTML = 
this.el.nativeElement.innerHTML.substring(0, this.myTrimmer) + '...'; 
    } 
} 

See:

set myTrimmer(value: string) { 
    var myTrim = this; 
    setTimeout(function(){ 
    myTrim .originalValue = myTrim .el.nativeElement.innerHTML; 
    myTrim .length = +value; 
    if (+value < myTrim .el.nativeElement.innerHTML.length) 
     myTrim .el.nativeElement.innerHTML = myTrim .el.nativeElement.innerHTML.substring(0, value) + '...'; 
    }); 
} 

Plunker

Answer 3

Sie könnten einfach eine "TrimPipe" wie folgt verwenden:

{{myText | trim:10}} 

Der Rohrcode:

import {Pipe, PipeTransform} from '@angular/core'; 

@Pipe({name: 'trim'}) 
export class TrimPipe implements PipeTransform { 
    transform(text: any, trimValue: number) { 
    if (!text) { 
     return ''; 
    } 
    return text.substring(0, trimValue) + '...'; 
    } 
}