Как правильно использовать dotdotdot для переполнения текста в угловых 5? - PullRequest
Новая
       27

Как правильно использовать dotdotdot для переполнения текста в угловых 5?

0 голосов
/ 22 сентября 2018

Я хотел бы создать директиву, которая применяется ... при переполнении.В прошлом я использовал плагин 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 или, возможно, у angular есть другое решение для этого требования?Заранее спасибо!

Ответы [ 5 ]

0 голосов
/ 24 февраля 2019

Существует альтернативное решение для многострочного текста.Это чисто угловая директива, без jquery:

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

0 голосов
/ 22 сентября 2018

Вы можете сделать это только с помощью CSS.Попробуйте это в вашем предложении div: 

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

... появится, если предложение слишком длинное для контейнера div.

0 голосов
/ 22 сентября 2018

Раствор 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 }}
0 голосов
/ 22 сентября 2018

Хотя было бы лучше найти собственное угловое решение, если вы действительно хотите использовать плагин jquery, вам нужно создать плагин dotdotdot для элемента dom.

В приведенном ниже коде предполагается, что у вас естьимпортированные 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

template.html 

<div dotdotdot>content here </div>

Примечание : я добавил setTimeout, так как кажется, что он не работает, вероятно, потому чтопри запуске плагина в элементе еще нет содержимого

Stackblitz demo

0 голосов
/ 22 сентября 2018

У меня нет 50 необходимых очков репутации, чтобы опубликовать его в качестве комментария, поэтому я публикую его в качестве ответа: вам может быть интересно посмотреть здесь: Как обрезать текст в Angular2? Существует довольно много вариантов, от простого {{str | slice:0:n}} до написания собственного канала.

...