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 返回

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