In einem Angular-Projekt möchte ich den Ansichtsbereich eines IntersectionObservers auf einen bestimmten Teil des DOM beschränken.
Ich verwende id, um das Element zu definieren, das als Root verwendet werden soll:
<div id="container">
<div class="page-list">
<infinite-scroll-page (scrolled)="onInfiniteScroll()">
...
</infinite-scroll-page>
</div>
</div>
In der entsprechenden Komponente definiere ich die Wurzel mit getElementById:
export class InfiniteScrollPageComponent implements OnDestroy {
@Input() options: {root, threshold: number} = {root: document.getElementById('container'), threshold: 1};
@ViewChild(AnchorDirectivePage, {read: ElementRef, static: false}) anchor: ElementRef<HTMLElement>;
private observer: IntersectionObserver;
constructor(private host: ElementRef) { }
get element() {
return this.host.nativeElement;
}
ngAfterViewInit() {
const options = {
root: document.getElementById('container'),
...this.options
};
console.log("options: ", JSON.stringify(options));
//...
Aber der angemeldete Root ist immer null.
Was habe ich falsch gemacht?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
首先，您的扩展运算符是错误的方式，因此不幸的是，您在使用
@Input()中的默认值设置后立即覆盖您的root赋值（据我所知，这不是实际上用作输入？）。解决这个问题可能只需要扭转这个局面：
const options = { root: document.getElementById('container'), ...this.options };应该是
const options = { ...this.options, root: document.getElementById('container') };其次，我想知道使用
@ViewChild并将对容器元素的引用从父级传递到InfiniteScrollPageComponent是否更有意义。parent.component.htmlparent.component.tsexport class ParentComponent { @ViewChild('Container') containerRef: ElementRef;
} infinite-page-component.component.tsexport class InfiniteScrollPageComponent { @Input() containerRef: ElementRef;
ngAfterViewInit() {
const options = {
...this.options
root: containerRef.nativeElement,
};
}