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

Question

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

<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 имущество.

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

Answer 1

Просто иди с [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();
  }

Демо-пример