[英]How to Apply styled using Renderer2 to a child node of ElementRef -> nativeElement in Angular
Suppose I have the following Angular Template: 假设我有以下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>
This section of code is being generated multiple times using *ngFor
. 这部分代码使用
*ngFor
多次生成。
I want to dynamically change the left alignment of the <b>
tag by calculating the width of the first and second <span>
. 我想通过计算第一个和第二个
<span>
的宽度来动态更改<b>
标记的左对齐。
I already tried using [style.left.px]="FirstSpan.offsetWidth + SecondSpan.offsetWidth + 3"
, but this throws the Expression Changed after Checked
error. 我已经尝试过使用
[style.left.px]="FirstSpan.offsetWidth + SecondSpan.offsetWidth + 3"
,但是这会导致Expression Changed after Checked
错误导致Expression Changed after Checked
。
I then thought of trying out using QueryList<ElementRef>
but I am facing the problem that the icon is present only in some of the cases and hence, I am not able to add style to the <b>
by using the children
property of the ElementRef
as Renderer2
is throwing error stating unable to find style
property. 然后,我想到了尝试使用
QueryList<ElementRef>
但是我面临的问题是,仅在某些情况下才显示图标,因此,我无法通过使用的children
属性为<b>
添加样式作为Renderer2
ElementRef
错误,指出无法找到style
属性。
Please help me solve this issue. 请帮我解决这个问题。
Just go with [style.left.px]
& use @viewChildren
for selecting those elements. 只需使用
[style.left.px]
并使用@viewChildren
选择那些元素。 Update your view code to: 将您的视图代码更新为:
<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>
Then in component class code make sure you import ChangeDetectorRef
: 然后在组件类代码中,确保您导入
ChangeDetectorRef
:
import { ChangeDetectorRef } from '@angular/core';
This's for updating value of context variable after ViewInit. 这是为了在ViewInit之后更新上下文变量的值。 Now following changes in class:
现在,在类中进行以下更改:
@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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.