在Angular2或+中，有什么替代"limitTo“的选项吗？

Question

就像在Angularjs (角-1)中一样，有一个limitTo过滤器来限制您必须显示的文本。

例句:如果我有一根类似于

$scope.val = "hey there how are you";

而且我只能在HTML端显示有限的文本，所以我使用了

{{val | limiteTo:10}}

所以它只显示了一个字符串中的10个字符，比如:：，嗨，

我被Angualr2感动了，我不知道在这里怎么做，我使用了相同的过滤器，但它不能工作

Answer 1

使用SlicePipe

创建一个新的数组或字符串，其中包含元素的子集(切片)。

@Component({
  selector: 'slice-string-pipe',
  template: `<div>
    <p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>
    <p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p>
    <p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>
    <p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>
    <p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>
    <p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>
  </div>`
})
export class SlicePipeStringComponent {
  str: string = 'abcdefghij';
}

否则创建自定义管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'slice'
})
export class SlicePipe implements PipeTransform {
  transform(value: any, start?: any, end?: any): any {
    if (start == null && end == null) {
      return value;
    }
    else {
      return value.slice(start, end);
    }
  }

}

示例：https://stackblitz.com/edit/angular-uv5gvs

参考文献：https://angular.io/api/common/SlicePipe

Answer 2

在角4中有切片管道，您可以使用它，下面也是来自tutorialspoint.com的代码片段，下面我已经为同样的链接附加了一个链接。

​

<div style="width:40%;float:left;border:solid 1px black;">
  <h1>Json Pipe</h1>
  <b>{{ jsonval | json }}</b>
  <h1>Percent Pipe</h1>
  <b>{{00.54565 | percent}}</b>
  <h1>Slice Pipe</h1>
  <b>{{months | slice:2:6}}</b> // here 2 and 6 refers to the start and the end index
</div>

​

角4管

内置管角