ngStyle VS Renderer2?我应该使用什么? [英] ngStyle VS Renderer2 ? What should I use?

问题描述

我正在使用Angular 5.2.9.

I'm using Angular 5.2.9.

我想知道何时应该在ngStyle上使用Renderer2?哪个是最好的解决方案?

I was wondering when should I use Renderer2 over ngStyle ? Which is the best solution ?

1:<div #div>FOO BAR</div>

  @ViewChild('div') div: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
      this.renderer.setStyle(this.div.nativeElement, 'background', 'blue');
  }

2:<div [ngStyle]="styleValue">FOO BAR</div>

  styleValue: any = {};

  ngAfterViewInit() {
      this.styleValue = {background: 'blue'};
  }

我知道在ngFor中使用"ngStyle"会更容易，例如:

I know that it is easier to use "ngStyle" in a ngFor, eg:

<div ngFor="let elem of array" [ngStyle]="styleValue">

否则，您应该在这种情况下执行:<div ngFor="let elem of array" #div>FOO BAR</div>

Otherwise you should do for this case: <div ngFor="let elem of array" #div>FOO BAR</div>

  @ViewChildren('div') divs: QueryList<ElementRef>;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
     this.divs.change.subscribe(() => {
        this.toFlipArray.forEach((div) => {
            this.renderer.setStyle(this.div.nativeElement, 'background', 'blue');
        })
     }
  }

在ngFor中使用Renderer2的时间似乎更长，我什至还没有终止订阅.

This seems much more longer in a ngFor to use Renderer2 and I have even not killed the subscription.

性能上有区别吗?也许在其他地方?

Is there a difference in performance ? Maybe somewhere else ?

推荐答案

ngStyle和renderer.setStyle均用于动态设置组件样式

Both ngStyle and renderer.setStyle are used to dynamically style a component

但是renderer.setStyle似乎比[ngStyle]优先，即使ngStyle看起来是一种嵌入式样式.

But renderer.setStyle looks to take precedence over [ngStyle] even if ngStyle looks to be a type of embedded style.

演示示例:

https://stackblitz.com/edit /angular-jtdk4z?file=src%2Fapp%2Fapp.component.html

查看ngStyle的内部实现时:

https://github.com /angular/angular/blob/master/packages/common/src/directives/ng_style.ts

看起来它本身是使用renderer.setStyle

@Directive({selector: '[ngStyle]'})
export class NgStyle implements DoCheck {
  private _ngStyle: {[key: string]: string};
  private _differ: KeyValueDiffer<string, string|number>;

  constructor(
      private _differs: KeyValueDiffers, private _ngEl: ElementRef, private _renderer: Renderer2) {}

  @Input()
  set ngStyle(v: {[key: string]: string}) {
    this._ngStyle = v;
    if (!this._differ && v) {
      this._differ = this._differs.find(v).create();
    }
  }

  ngDoCheck() {
    if (this._differ) {
      const changes = this._differ.diff(this._ngStyle);
      if (changes) {
        this._applyChanges(changes);
      }
    }
  }

  private _applyChanges(changes: KeyValueChanges<string, string|number>): void {
    changes.forEachRemovedItem((record) => this._setStyle(record.key, null));
    changes.forEachAddedItem((record) => this._setStyle(record.key, record.currentValue));
    changes.forEachChangedItem((record) => this._setStyle(record.key, record.currentValue));
  }

  private _setStyle(nameAndUnit: string, value: string|number|null|undefined): void {
    const [name, unit] = nameAndUnit.split('.');
    value = value != null && unit ? `${value}${unit}` : value;

    if (value != null) {
      this._renderer.setStyle(this._ngEl.nativeElement, name, value as string);
    } else {
      this._renderer.removeStyle(this._ngEl.nativeElement, name);
    }
}

这篇关于ngStyle VS Renderer2?我应该使用什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！