Question

假设我有以下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>和第二个<span>的宽度来动态更改[style.left.px]="FirstSpan.offsetWidth + SecondSpan.offsetWidth + 3"标签的左对齐。

我已经尝试使用Expression Changed after Checked，但这会引发QueryList<ElementRef>错误。

然后我想尝试使用<b>，但是我面临的问题是，仅在某些情况下才显示图标，因此，我无法通过children向ElementRef添加样式将Renderer2的{{1}}属性用作style会引发错误，指出无法找到'bcp ' + db_name() + '.dbo.' + @sTableName + ' in ' + @sInputFile + ' -S ' + @@SERVERNAME + ' -m 10000 -T -t "|" -w -E -e '+@sInputFileBCPLog属性。

请帮助我解决此问题。

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

Demo Example

如何将使用Renderer2设置样式的样式应用于Angular中ElementRef-> nativeElement的子节点

1 个答案: