как правильно использовать dotdotdot для переполнения текста в angular 5?

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


angular angular-directive jquery-plugins
person user2304483    schedule 22.09.2018    source источник

Ответы (5)


arrow_upward
18
arrow_downward

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

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

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

person ghuntheur    schedule 22.09.2018
comment
Ваше решение просто работает, мне пришлось добавить дополнительный div и применить класс css ‹h3› ‹a href=#› ‹div class = dotdotdot› {{data.trip.name}} ‹/div› ‹/a› ‹/ h3 › - person user2304483; 23.09.2018

arrow_upward
6
arrow_downward

Решение 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 }}
person Balázs Takács    schedule 22.09.2018
comment
решение должно быть отзывчивым, я предполагаю, что указание количества разрешенных символов явно не сработает. JQuery работал прекрасно, но я не мог заставить его работать внутри директивы - person user2304483; 22.09.2018

arrow_upward
1
arrow_downward

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

person Maciej21592    schedule 22.09.2018
comment
решение должно быть отзывчивым, я предполагаю, что указание количества разрешенных символов явно не сработает. JQuery работал прекрасно, но я не мог заставить его работать внутри директивы. - person user2304483; 22.09.2018
comment
Под динамическим я понимаю, что вы имеете в виду, что он должен реагировать на изменения, происходящие с базовыми значениями в соответствующем классе, что действительно имеет место с указанным выше решением; взгляните на фрагмент, демонстрирующий это здесь: stackblitz. ru / edit / - person Maciej21592; 22.09.2018
comment
Только что заметил другой ответ, хаха, рад, что вы нашли решение ^^ - person Maciej21592; 22.09.2018

arrow_upward
0
arrow_downward

Хотя было бы лучше найти собственное угловое решение, если вы действительно хотите использовать плагин 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.html

<div dotdotdot>content here </div>

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

демонстрация Stackblitz

person David    schedule 22.09.2018
comment
Демонстрация работает, как ожидалось, я думаю, но я не мог заставить ее работать в моей среде. Я использую шаблон: ‹h3› ‹a href=# dotdotdot› {{data.trip.name}} ‹/a› ‹/h3› - person user2304483; 22.09.2018
comment
SetTimeout работает нормально, потому что я смог использовать команду alert (), но код точки dotdotdot не работал $ (el.nativeElement) .dotdotdot ({truncate: letter}); - person user2304483; 22.09.2018
comment
@ user2304483 хорошо, если он не работает только в вашей среде, я не могу сделать намного больше - person David; 22.09.2018
comment
Если проблема не в том, что плагин работает только с текстом, который есть у элемента при инициализации плагина. Я не тестировал динамический текст (здесь уже поздно) - person David; 22.09.2018

arrow_upward
0
arrow_downward

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

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

person tdev    schedule 24.02.2019