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>

我期望代码应该在构造函数中实现，但是我不知道如何在角度5中使用它？我应该将指令用作jQuery插件的包装器还是角度对此要求有不同的解决方案？预先感谢！

Answer 1

解决方案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 2

您只能使用CSS执行此操作。在您的句子div上尝试一下：

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

如果句子对于容器div而言太长，则会显示

...。

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

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

5 个答案: