Question

我尝试创建指令，如果计数超过某个特定值，则可以减少符号数。

E.g。如果字符串长度超过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

你应该明确地使用Pipes而不是指令

像这样的东西

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指令：获取标签内容

2 个答案: