Эллипсис директива с заголовком - PullRequest
Новая
       12

Эллипсис директива с заголовком

1 голос
/ 11 марта 2019

У меня есть угловая директива, которая добавляет стиль text-overflow: ellipsis; overflow: hidden; white-space: nowrap; в ngOnInit, а затем выглядит примерно так: 

@Directive({ selector: 'ellipsis' })
class EllipsisDirective {
  ngAfterViewInit() {
    const el: HTMLElement = this.el.nativeElement;
    if (el.offsetWidth < el.scrollWidth) {
      el.setAttribute('title', el.innerText);
    }
  }
}

Использование: <div ellipsis>Some Very Long Text Here</div>

Проблема:
На некоторых страницах компоновка / компоненты не изменяются при «навигации», а только данные.В настоящее время директива не определяет разницу в el.innerText и поэтому сохраняет старое свойство .title.

Я также пытался использовать Input() и работать с ngOnChanges().Хотя я предпочел бы не использовать ввод.

Я могу заставить его работать с вводом и setTimeout, но это вряд ли может быть правильным.

1 Ответ

0 голосов
/ 11 марта 2019

Полагаю, нужно было начинать с официальных документов . Ответ использует событие жизненного цикла AfterViewChecked.

AfterViewChecked
Отвечать после Angular проверяет содержимое, проецируемое в директиву / компонент.

Вызывается после ngAfterContentInit () и каждого последующего ngDoCheck (). 

@Directive({ selector: '[appEllipsis]' })
export class EllipsisDirective implements OnInit, AfterViewChecked {
  private get hasOverflow(): boolean {
    const el: HTMLElement = this.el.nativeElement;
    return el.offsetWidth < el.scrollWidth;
  }

  constructor(
    private el: ElementRef,
    @Inject(PLATFORM_ID) private platformId: any,
  ) {}

  ngOnInit() {
    // class overflow: text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
    this.el.nativeElement.classList.add('overflow');
  }

  ngAfterViewChecked() {
    const isBrowser = isPlatformBrowser(this.platformId);
    if (isBrowser) {
      if (this.hasOverflow) {
        this.el.nativeElement.setAttribute('title', this.el.nativeElement.innerText);
      } else {
        this.el.nativeElement.setAttribute('title', '');
      }
    }
  }
}
...