一种棱角分明的方法，用于判断内容是否溢出ngFor中的容器，如果是，则从哪个项目开始溢出
我想要一种方法来判断容器内部的组件是否溢出容器。如果它确实溢出了，我想获取导致溢出的项的索引。
这个问题的目的是在溢出时添加一个显示更多按钮，并将对象分成两部分:适合的项和不适合的项。
组件由*ngFor生成。
这里有一个最小的例子来说明发生了什么
<div class="my-container">
<div
class="item"
*ngFor="let item of items; let i = index; trackBy: trackById"
>
{{ item.val }}
</div>
<div>.my-container {
overflow: hidden;
max-width: 100%;
display: flex;
}当我的容器水平填充项目时，如果有足够的项目，它可能会水平溢出。我想知道它是否溢出，并确定导致溢出的项的索引。
这是我的尝试：
// this fn gets called in ngOnChanges
determineShowMore() {
const container = document.querySelector('.my-container') as HTMLElement;
const viewItems: any = container ? Array.from(viewsContainer.children) : [];
let totalWidth = 0;
viewItems.forEach((x: HTMLElement) => {
totalWidth += x.offsetWidth;
});
const isOverflow = totalWidth > viewsContainer.offsetWidth ? true : false;
// missing: determine which item causes the overflow
}它似乎不能很好地工作，也许是因为它发生在html完全呈现之前？我不能在ngAfterViewInit()上运行这个fn，因为我的items可以动态更改，我需要它在每次更改时运行。
回答 2
Stack Overflow用户
发布于 2019-09-27 03:06:36
首先，如果你使用的是Angular，我不会使用document.querySelector()。您可以导入ElementRef并使用它。其次，我认为你可以通过每次添加一个元素时运行一个回调来实现这一点。尝试从单个项目创建子组件，并使用事件发射器告诉父组件是否添加“阅读更多”按钮。
import { Component, ElementRef, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'single-item',
templateUrl: './single-item.component.html',
styleUrls: [ './single-item.component.css' ]
})
export class SingleItem {
@Input index: number
@Output onAddItem = new EventEmitter()
constructor(private elementRef: ElementRef) {
const container = this.elementRef.nativeElement
const wrapper = this.container.parentElement
this.onAddItem.emit({
isOverflowed:
container.clientHeight > wrapper.clientHeight ||
container.clientWidth > wrapper.clientWidth,
index: this.index:
})
}
}然后在父级的HTML中：
<div class="container">
<ng-container
*ngFor="let item of items; let i = index; trackBy: trackById"
>
<single-item
(onAddItem)="handleAddItem($event)"
[index]="i"
>
{{ item.val }}
</single-item>
</ng-container>
</div>在JS中，您可能会这样处理它。
overflowingIndex: number
handleAddItem(event) {
if (!event.isOverflowed) return false
this.overflowingIndex = this.overflowingIndex || event.index
// add your read more button here
}Stack Overflow用户
发布于 2019-09-27 02:31:22
您可以对其使用交叉点观察者api。
它将帮助您通知哪个div项是完全可见的还是部分可见的。docs链接和angular实现链接如下。
https://usefulangle.com/post/113/javascript-detecting-element-visible-during-scroll
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
https://stackoverflow.com/questions/58122519
复制相似问题
腾讯云开发者
