如何在指令属性中设置初始值答案

【问题标题】：How to set initial value in directive property如何在指令属性中设置初始值
【发布时间】：2016-06-05 10:57:05
【问题描述】：

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

【问题讨论】：

标签： angularjs angular angular2-directives

【解决方案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

【讨论】：

【解决方案2】：

这是因为 Angular 尚未编译 {{myText}}。要让 Angular 编译 {{myText}}，您需要推迟修剪器功能。为此，您可以像这样使用 javascript 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

【讨论】：

【解决方案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) + '...';
  }
}

【讨论】：