Как применить стиль с использованием Renderer2 к дочернему узлу ElementRef -> nativeElement в Angular - PullRequest
Новая
       38

Как применить стиль с использованием Renderer2 к дочернему узлу ElementRef -> nativeElement в Angular

0 голосов
/ 05 июля 2018

Предположим, у меня есть следующий угловой шаблон: 

<p class="margin0 text-overflow table-cell" #ParentP>
  <span id="managerDisplayName" #FirstSpan class="bold" title="{{ someBinding 1}}">{{ someBinding2 }}</span>
  <span id="regionName" #SecondSpan class="bold regionName" title="{{ someBinding3 }}"> {{ someBinding4 }}</span> 
  <span class="service-level-icon">
    <b placement="bottom" #IconHolder triggers="mouseenter:mouseleave" container="body" *ngIf=" someCondition1 " popoverTitle="" [ngbPopover]="servicelevelcontent"><i class="somecon"></i></b>                                        
  </span>
</p>

Этот раздел кода генерируется несколько раз с использованием *ngFor.

Я хочу динамически изменить выравнивание по левому краю тега <b> путем вычисления ширины первого и второго <span>.

Я уже пытался использовать [style.left.px]="FirstSpan.offsetWidth + SecondSpan.offsetWidth + 3", но это выдает ошибку Expression Changed after Checked.

Затем я подумал о попытке использовать QueryList<ElementRef>, но я столкнулся с проблемой, что значок присутствует только в некоторых случаях, и, следовательно, я не могу добавить стиль к <b> с помощью children свойство ElementRef при Renderer2 выдает ошибку, из-за которой невозможно найти style свойство.

Пожалуйста, помогите мне решить эту проблему.

1 Ответ

0 голосов
/ 05 июля 2018

Просто нажмите [style.left.px] и используйте @viewChildren для выбора этих элементов. Обновите ваш код просмотра: 

<p class="margin0 text-overflow table-cell" #ParentP>
  <span id="managerDisplayName" #FirstSpan class="bold" title="{{ someBinding 1}}">{{ someBinding2 }}</span>
  <span id="regionName" #SecondSpan class="bold regionName" title="{{ someBinding3 }}"> {{ someBinding4 }}</span> 
  <span class="service-level-icon">
    <b placement="bottom" #IconHolder [style.left.px]="updatedLeftStyle" triggers="mouseenter:mouseleave" container="body" *ngIf=" someCondition1 " popoverTitle="" [ngbPopover]="servicelevelcontent"><i class="somecon"></i></b>                                        
  </span>
</p>

Затем в коде класса компонента убедитесь, что вы импортируете ChangeDetectorRef: 

import { ChangeDetectorRef } from '@angular/core';

Это для обновления значения переменной контекста после ViewInit. Теперь следующие изменения в классе: 

@ViewChildren('FirstSpan,SecondSpan') spans:QueryList<ElementRef>;

constructor(private cdRef:ChangeDetectorRef) { }

ngAfterViewInit() {
    console.debug(this.spans); 
    let eleArr: any = this.spans.toArray();
    this.updatedLeftStyle = eleArr[0].nativeElement.offsetWidth + eleArr[1].nativeElement.offsetWidth;
    this.cdRef.detectChanges();
  }

Пример демонстрации

...