getBoundingClienRect () извлекает хорошую позицию элемента в первый раз, но {0,0,0,0} после второго рендеринга - PullRequest
Новая
       61

getBoundingClienRect () извлекает хорошую позицию элемента в первый раз, но {0,0,0,0} после второго рендеринга

0 голосов
/ 19 сентября 2018

В настоящее время я занимаюсь разработкой приложения Ionic4 / stencil (с набором инструментов PWA: https://ionicframework.com/pwa/toolkit) и получаю вопрос о получении позиции компонента. 

@Component({
    tag: 'app-projects-gallery',
    styleUrl: 'app-projects-gallery.scss'
})
export class AppProjectsGallery {

/* some code here*/


 */
private computeGridProperties() {
   /* some code here*/
}

getPos(id: number, e) {
    var element = document.getElementById("img" + id);
    var r = element.getBoundingClientRect();
    console.log("event" + e);
    console.log("Les dimensions du rectangle sont :");
    console.log("{top:" + r.top + ", left:" + r.left + ", right:" + r.right 
 + ", bottom:" + r.bottom + "}");
}

render() {

    return (
        <ion-page>
            <ion-content>
                <ion-grid>
                    <ion-row>
                        {this.projets.map((projet) => {
                            return <ion-col class={'column-' + this.cardsPerRow}>
                                <ion-button onClick={this.getPos.bind(this, this.projets.indexOf(projet))} href={`/project_infos/${this.projets.indexOf(projet)}`} >
                                        <img id={"img" + this.projets.indexOf(projet)}
                                        class='project-logo'
                                        src={this.rootPath + projet.directoryName + '/logo' + this.fileExtension} />
                                </ion-button>
                            </ion-col>
                        })}
                    </ion-row>
                </ion-grid>
            </ion-content>
        </ion-page>
    );
}

}

Когда пользователь нажимает ионную кнопку, мы вызываем метод getPos () с идентификатором img, для которого мы хотим получить позицию.

Когда я нажимаю на кнопку, все работаетхорошо, и я вижу в консоли хорошую позицию моего img: 

event[object MouseEvent]
app-projects-gallery.js:69 Les dimensions du rectangle sont :
app-projects-gallery.js:70 {top:79, left:144.046875, right:215.921875, 
bottom:151.15625}

Но если я снова нажму на изображение, я получу {0,0,0,0} координату ... 

event[object MouseEvent]
app-projects-gallery.js:69 Les dimensions du rectangle sont :
app-projects-gallery.js:70 {top:0, left:0, right:0, bottom:0}

у вас есть объяснение этому?

Заранее спасибо,

1 Ответ

0 голосов
/ 19 сентября 2018

Я наконец-то нашел решение,

В Stencil document.getElementById не работает.Вместо этой функции вы должны определить элемент ref.

В моем случае решение: 

<ion-button onClick={() => this.getPos(index)} href={`/project_infos/${this.projets.indexOf(projet)}`} >
                                        <img ref = {(el : HTMLImageElement) =>  this.imageLogo = [...this.imageLogo, el]}
                                        class='project-logo'
                                        src={this.rootPath + projet.directoryName + '/logo' + this.fileExtension} />
                                </ion-button>

И я могу получить доступ к элементам в моем imageLogo: HTMLImageElement [] напрямую с: 

var element = this.imageLogo[index];
var r = element.getBoundingClientRect();

Трафарет, кажется, хороший техно, но у меня еще есть работа, чтобы оценить его ^ _ ^

...