0

我目前正在开发一个 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>
    );
}

}

当用户点击 ion-button 时，我们使用我们想要检索位置的 img 的 id 调用 getPos() 方法。

当我单击按钮时，一切正常，我在控制台中看到我的 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}

你对此有什么解释吗？

提前致谢，

4

1 回答 1

0

我终于找到了解决办法

在 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();

Stencil 似乎是一个很好的技术，但我还有一些工作要欣赏它^_^

于 2018-09-19T14:35:21.127 回答