ディレクティブはレイアウトの破棄を避けますか？

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

ありたとえばhttps://github.com/wilsonpage/fastdomのために重ねた可能onResizeでの2つの条件があるが、それは必要かしら？おそらく、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; 
     } 
     }