Angular2 指令：获取标签内容

Question

我正在尝试创建指令，如果符号的数量超过某个特定值，它可以减少符号的数量。

例如如果字符串长度大于 8，则将其剪切并在末尾添加 ...

'some string here'

应该变成

'some str...'

这是我目前所拥有的

import { Directive, ElementRef, Input, Renderer  } from '@angular/core';

@Directive({
    selector: '[textOverflowLimit]',
})
export class TextOverflowLimitDirective {
    constructor(el: ElementRef, renderer: Renderer) {
        console.log(el.nativeElement);
    }
}

所以，问题是获取当前内容的长度

el.nativeElement returns

<td _ngcontent-awg-3 textoverflowlimit>Here is some long string that I want to cut off</td>

我在尝试

el.nativeElement.innerHTML
el.nativeElement.innerText

还有很多其他的，但我找不到

Here is some long string that I want to cut off

字符串，没有标签前缀，有什么想法吗？

Answer 1

@Directive({
    selector: '[textOverflowLimit]',
})
export class TextOverflowLimitDirective {
    constructor(private el: ElementRef, renderer: Renderer) {}

    ngAfterViewInit() {
        console.log(this.el.nativeElement.innerText);
    }
}

Plunker example

Answer 2

你绝对应该使用管道而不是指令

像这样

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'textOverflowLimit'})
export class textOverflowLimithPipe implements PipeTransform {
  transform(value: string): string{
    if(value.length > 8)
      return value.substr(0,8)+'...';
    return value    
  }
}

并在模板中像这样使用它

<td>{{"Some string" | textOverflowLimit }}</td>

Angular2 指令：获取标签内容

Angular2 Directive : get tag content

angular2-directives

angular