如何在 angular 5 中正确使用 dotdotdot 作为溢出文本？

Question

我想创建一个在溢出时应用...的指令。我过去使用过 dotdotdot jQuery 插件，但实际上并没有在 angular 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 插件的包装器还是 angular 对此要求有不同的解决方案吗？提前致谢！

Answer 1

我没有获得所需的 50 点声望点数，无法 post 将其作为评论，因此我 post 将其作为答案：您可能有兴趣看这里：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 插件。

来自您的组件

component.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
      }
    )
  }
}

将引用添加到您的模板

template.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
  });
});
 }

}

template.ts

将引用添加到您的模板

template.html

<div dotdotdot>content here </div>

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

Stackblitz demo

Answer 4

您只能使用 css 执行此操作。在你的句子上试试这个 div :

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

如果句子对于容器 div.

来说太长，将出现

...

Answer 5

多行文本有一个替代解决方案。它是纯 angular 指令，没有 jquery:

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

如何在 angular 5 中正确使用 dotdotdot 作为溢出文本？

how to correctly use dotdotdot for overflow text in angular 5?

jquery-plugins

angular-directive

angular