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

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

因为 angular 还没有编译 {{myText}}。要让 angular 编译 {{myText}}，您需要推迟 trimmer 函数。为此，您可以使用 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

Answer 2

我想这样你需要等待这样的 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 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) + '...';
  }
}

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

How to set initial value in directive property

angularjs

angular2-directives

angular

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

How to set initial value in directive property

angularjs

angular2-directives

angular

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