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

因为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

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

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

3 个答案: