Question

jQuery具有插件appear或航点，用于检测视口中元素是否可见。我做了一些研究，我找不到并想知道Angular2是否有类似的插件。如果还没有，做这样的事情最好的方法是什么？

Answer 1

我就是这样做的：

sync-dom.utils.ts

static isInViewPort(rect: ClientRect, threshold = 0) {
    return rect &&
        rect.height &&
        rect.top + rect.height + threshold >= 0 &&
        rect.left + rect.width + threshold >= 0 &&
        rect.bottom - rect.height - threshold <= SyncDomUtils.windowHeight &&
        rect.right - rect.width - threshold <= SyncDomUtils.windowWidth;
}

dom.utils.ts

async isInViewPort(rect: ClientRect) {
    return SyncDomUtils.isInViewPort(rect);
}

并在您的组件中执行：

async isInViewPort() {
    // you have to import the Renderer and ElementRef from angular/core
    this.boundingRect = await this.domElementUtils
        .invokeElementMethod(this.renderer, this.el.nativeElement, 'getBoundingClientRect');

    return await this.domUtils.isInViewPort(this.boundingRect);
}

并将该函数用作this.isInViewPort（），它将返回一个布尔值

这是我在invokeElementMethod

中的dom-element.utils.ts

async invokeElementMethod<T extends keyof HTMLElement>(renderer: Renderer, element: any, methodName: T, args?: any[]) {
    return await renderer.invokeElementMethod(element, methodName, args) as any;
}

元素在屏幕上可见时的触发功能（视口）

1 个答案: