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

Question

我想创建一个适用于溢出时的指令。我过去使用过dotdotdot jQuery插件但它在角度5中并没有真正起作用。

我现在所拥有的是使用选择器[app Dotdotdot]创建一个名为Dotdotdot Directive的指令，如下所示：

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>

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

Answer 1

你只能用css做到这一点。试试你的句子div：

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

如果容器div的句子太长，则会出现...。

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

我没有获得所需的50个声望点以便将其作为评论发布，因此我将其作为答案发布：您可能有兴趣看看这里：How to truncate text in Angular2?有很多选项可以使用简单的{{str | slice:0:n}}来写自己的烟斗。

Answer 4

虽然找到原生角度解决方案会更好，但如果你真的想使用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 5

有多线文本的替代解决方案。它是纯角度指令，没有jquery：

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