Angular 2 getBoundingClientRect aus Komponente

Question

Ich habe Komponente wie unter denen ist im Grunde ein popover:

import {Component, Input, ViewChild} from 'angular2/core' 

declare var $: any; 

@Component({ 
    selector: 'popover', 
    template: ` 
    <div id="temp" [ngStyle]="{'position':'absolute', 'z-index':'10000', 'top': y + 'px', left: x + 'px'}" 
     [hidden]="hidden" #temp> 
    <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class Popover { 

    @ViewChild("temp") temp; 

    private hidden: boolean = true; 
    private y: number = 0; 
    private x: number = 0; 

    show(target, shiftx = 0, shifty = 0){ 
    let position = $(target).offset(); 
    this.x = position.left + shiftx; 
    this.y = position.top + shifty; 
    this.hidden = false; 

    console.log("#temp", this.temp.nativeElement.getBoundingClientRect()); //all 0s 
    console.log("temp id", document.getElementById('temp').getBoundingClientRect()); //all 0s 
    } 

    hide(){ 
    this.hidden = true; 
    } 
} 

Im Innern der show() Methode, die ich das Ergebnis von getBoundingClientRect() zu bekommen versuchen aber seinen 0 für alle Eigenschaften der Rückkehr, aber wenn ich schreibe in document.getElementById("temp").getBoundingClientRect() von Chrome-Konsole bekomme ich richtige Ergebnis mit tatsächlichen Werten in den Eigenschaften. Warum der Unterschied und was kann ich tun, um den tatsächlichen Wert von meiner Komponente zu erhalten?

Answer 1

Aus irgendeinem Grund wurde das DOM nicht direkt aktualisiert, nachdem es so gezeigt wurde, ein setTimeout z. 10 haben den Trick gemacht.

Answer 2

Ich würde ngAfterContentChecked() verwenden. Es funktioniert vollkommen in Ordnung für mich.

import { AfterContentChecked } from '@angular/core'; 

export class ModelComponent implements AfterContentChecked { 
    ngAfterContentChecked() { 
     //your code 
    } 
} 

Ich hoffe, es hilft. :)

Answer 3

Anstatt SetTimeout oder Lifecycle-Hooks, die mehr als einmal ausgelöst werden können, löste ich es mit der Einstellung der Renderer das Fenster laden Ereignis zu beobachten.

import { OnInit, Renderer2} from '@angular/core'; 

... 

export class MyComponent implements OnInit { 

constructor(private el: ElementRef, private render: Renderer2) {} 

    ngOnInit() { 
     this.render.listen('window', 'load',() => { 
      const rect = this.el.nativeElement.getBoundingClientRect().top; 

     }) 
    } 

} 

Vielleicht hilft dies jemandes Anwendungsfall.