Как установить начальное значение в директиве собственности

Question

В этом plunker: У меня есть директива атрибут myTrimmer, что обивки длинный текст:

, который отлично работает для статического текста

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

, но не работает для интерполированное один:

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

, что означает, что он принимает пустую строку вместо myText в строке

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

Здесь устанавливается свойство директивы:

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

Я полагаю, что в этом случае вы должны ждать AfterViewInit события, как это:

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) + '...'; 
    } 
} 

Смотри также на этом обновленном plunkr https://plnkr.co/edit/MccvTyQxSpcgO6Tj99QX?p=preview

Answer 2

Его, потому что угловой не скомпилированные {{myText}} еще. чтобы угловой компилятор {{myText}} вам нужно отложить функцию триммера. для того, чтобы это сделать, вы можете использовать яваскрипт setTimeout функцию следующего образом:

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

Вы могли бы просто использовать «TrimPipe» следующим образом:

{{myText | trim:10}} 

Код трубы:

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) + '...'; 
    } 
}