做指令是否避免佈局垃圾？

Question

我不知道Renderer2是否有機制來避免佈局垃圾。讓我們這些搬遷提示樣本指令，如果有在屏幕上沒有更多的空間：

import { Directive, ElementRef, HostListener, AfterViewInit, Renderer2 } from '@angular/core'; 
 

 

 
@Directive({ 
 
    selector: '[fooDirective]', 
 
    exportAs: 'fooDirective' 
 
}) 
 
export class FooDirective implements AfterViewInit { 
 
    constructor(private el: ElementRef, private renderer: Renderer2) { 
 
    } 
 

 
    public ngAfterViewInit(): void { 
 
    this.onResize(); 
 
    } 
 

 
    @HostListener('window:resize') 
 
    public onResize(): void { 
 
    this.el.nativeElement.style.left = null; 
 
    this.el.nativeElement.style.top = null; 
 

 
    const bounds = this.el.nativeElement.getBoundingClientRect(); 
 
    const windowWidth = window.innerWidth; 
 
    const windowHeight = window.innerHeight; 
 

 
    if (windowWidth < bounds.right) { 
 
     this.renderer.setStyle(this.el.nativeElement, 'left', `calc(100% - ${bounds.right - windowWidth}px)`); 
 
    } 
 

 
    if (windowHeight < bounds.bottom) { 
 
     this.renderer.setStyle(this.el.nativeElement, 'top', `calc(0px - ${bounds.bottom - windowHeight}px)`); 
 
    } 
 
    } 
 
}

有在onResize兩種情況可能與被overlaped例如https://github.com/wilsonpage/fastdom，但我不知道是否有必要？也許angular2處理它本身？

Answer 1

沒有，渲染立即執行你的任務可以看出from the sources：

class DefaultDomRenderer2 implements Renderer2 { 
     setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void { 
     if (flags & RendererStyleFlags2.DashCase) { 
      el.style.setProperty(
       style, value, !!(flags & RendererStyleFlags2.Important) ? 'important' : ''); 
     } else { 
      el.style[style] = value; 
     } 
     }