如何正确使用 dotdotdot 在 Angular 5 中溢出文本？

Question

我想创建一个在溢出时应用的指令。 我过去使用过 dotdotdot jQuery 插件，但实际上并没有 在角度 5 中工作。

到目前为止，我所拥有的是创建一个名为 DotdotdotDirective 的指令 选择器[appDotdotdot]如下图：

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

declare var $: any;

@Directive({
  selector: '[appDotdotdot]'
})
export class DotdotdotDirective {

  constructor(private el: ElementRef) { }

}

用法很简单：

<h3><a href="#" appDotdotdot>{{data.trip.name}}</a></h3>

我还导入了 jQuery 插件，以防它可以在 指示。 index.html：

<script src="assets/js/jquery.dotdotdot.js"></script>

我希望代码应该在构造函数中实现，但我 不知道如何在 angular 5 中使用它？ 我应该使用该指令作为 jQuery 插件的包装器还是 角度对这个要求有不同的解决方案？ 提前致谢！

Answer 1

我没有获得所需的 50 点声望点才能将其作为评论发布，因此我将其发布为答案：您可能有兴趣在这里查看：How to truncate text in Angular2? 从使用简单的{{str | slice:0:n}} 到编写自己的管道，有很多选择。

Answer 2

解决方案 1：

{{ (myString.length > 10) ? (myString | slice:0:10) + '...' : myString }}

解决方案 2：

@Pipe({
    name: 'dotdotdot'
})

export class DotDotDotPipe implements PipeTransform {

    transform(value: string, limit: number): string {
        return value.length > limit ? value.substring(0, limit) + '...' : value;
    }
}

---

用法：

{{ myString | dotdotdot:10 }}

Answer 3

虽然最好找到原生的angular解决方案，但如果你真的想使用jquery插件，你需要在dom元素上实例化dotdotdot插件。

下面的代码假设你已经在你的项目中导入了 jquery 和 dotdotdot 插件。

来自您的组件

组件.ts

import { Component , ViewChild} from '@angular/core';
declare let $: any;
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  @ViewChild('test') elt; //get a reference to the element


  ngAfterViewInit()
  {
    $(this.elt.nativeElement).dotdotdot(
      {
        height: 70,watch: true
      }
    )
  }
}

添加对模板的引用

模板.html

<div #test>content here </div>

使用指令

如果你想使用指令，你可以试试这个

directive.ts

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

declare var $: any;

@Directive({
  selector: '[dotdotdot]'
})
export class DotdotdotDirective {

constructor(private el: ElementRef) {

setTimeout(()=>{  
  $(el.nativeElement).dotdotdot({
   watch: true,
   height: 70
  });
});
 }

}

模板.ts

添加对模板的引用

模板.html

<div dotdotdot>content here </div>

注意：我添加了setTimeout，因为没有它似乎无法工作，可能是因为启动插件时元素中还没有内容

Stackblitz demo

Answer 4

您只能使用 css 来做到这一点。 在你的句子 div 上试试这个：

 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;

如果句子对于容器div来说太长，会出现...。

Answer 5

多行文本有另一种解决方案。它是纯角度指令，没有 jquery：

https://www.npmjs.com/package/multiline-dotdotdot