Угловое 2 getBoundingClientRect от компонента

У меня есть компонент, как показано ниже, который в основном поповер:Угловое 2 getBoundingClientRect от компонента

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

Внутри show() метод, который я пытаюсь получить результат getBoundingClientRect(), но его возвращение 0 для всех свойств, но когда я печатаю в document.getElementById("temp").getBoundingClientRect() с консоли Chrome. Я получаю правильный результат с фактическими значениями в свойствах. Почему разница и что я могу сделать, чтобы получить фактическое значение от моего компонента?

источник

2016-06-17 lbrahim

Я бы не ожидал разницы. Можете ли вы воспроизвести в Plunker? –

Я подозреваю, что Dom еще не обновлен, чтобы дать вам правильный размер. Можете ли вы обернуть консольный оператор в setTimeout, чтобы узнать, работает ли это. –

@ArpitAgarwal Yeah 'setTimeout()' сделал трюк :) – lbrahim

По какой-то причине DOM не обновлялся сразу после того, как он был показан так, setTimeout, например. 10 сделал трюк.

источник

2016-06-20 05:51:05 lbrahim

setTimout of ** 0 ** обычно достаточно –

Я использовал бы ngAfterContentChecked(). Он отлично работает для меня.

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

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

Надеюсь, это поможет. :)

источник

2017-07-07 18:52:00

Хорошо работает по директиве, чтобы получить 'ElementRef'' getBoundingClientRect'. Благодарю. –

Вместо того, чтобы использовать кнопки setTimeout или lifecycle, которые могут запускаться несколько раз, я решил это, установив Renderer для просмотра события загрузки окна.

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; 

     }) 
    } 

}

Возможно, это помогает чьей-то помощи.

источник

2018-01-15 13:33:44

Угловое 2 getBoundingClientRect от компонента

ответ

Смежные вопросы