代码之家  ›  专栏  ›  技术社区  ›  Arjun Panicker

如何使用render2将样式应用于elementRef->native元素的子节点(角度)

  •  0
  • Arjun Panicker  · 技术社区  · 6 年前

    假设我有以下角度模板:

    <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 回复  |  直到 6 年前
        1
  •  1
  •   Shantanu    6 年前

    [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';
    

    @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

    推荐文章