Dans un projet Angular, je souhaite limiter la fenêtre d'affichage d'un IntersectionObserver à une partie spécifique du DOM.
J'utilise id pour définir l'élément à utiliser comme root :
<div id="container">
<div class="page-list">
<infinite-scroll-page (scrolled)="onInfiniteScroll()">
...
</infinite-scroll-page>
</div>
</div>
Dans le composant correspondant, je définis la racine en utilisant 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));
//...
Mais la racine connectée est toujours null.
Qu'est-ce que j'ai fait de mal ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tout d'abord, votre opérateur de spread est dans le mauvais sens, donc malheureusement vous utilisez
@Input()中的默认值设置后立即覆盖您的rootpour l'affectation (qui, pour autant que je sache, n'est pas réellement utilisé comme entrée ?).Résoudre ce problème nécessite peut-être simplement de renverser la situation :
const options = { root: document.getElementById('container'), ...this.options };devrait être
const options = { ...this.options, root: document.getElementById('container') };Deuxièmement, je me demande si l'utilisation de
@ViewChild并将对容器元素的引用从父级传递到InfiniteScrollPageComponenta plus de sens.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,
};
}