0

假设我有以下 Angular 模板：

<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>通过计算 first 和 second 的宽度来动态更改标签的左对齐<span>。

我已经尝试过使用[style.left.px]="FirstSpan.offsetWidth + SecondSpan.offsetWidth + 3"，但这会引发Expression Changed after Checked错误。

然后我想尝试使用QueryList<ElementRef>，但我面临的问题是图标仅在某些情况下出现，因此，我无法<b>通过使用as的children属性来添加样式，抛出错误说明无法找到财产。ElementRefRenderer2style

请帮我解决这个问题。

4

1 回答 1

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();
  }

演示示例

于 2018-07-05T11:47:31.550 回答