在本文中，我將說明如何創建一個非常簡單的 Angular 指令來追蹤元素的可見性狀態，或者換句話說，當它進入和退出時視口。我希望這會是一個很好的、也許有用的練習！
為了做到這一點，我們將使用現代瀏覽器中可用的 IntersectionObserver JavaScript API。
我們想像這樣使用指令：
<p visibility [visibilityMonitor]="true" (visibilityChange)="onVisibilityChange($event)" > I'm being observed! Can you see me yet? </p>
輸出將具有以下形狀：
type VisibilityChange =
| {
isVisible: true;
target: HTMLElement;
}
| {
isVisible: false;
target: HTMLElement | undefined;
};
擁有未定義的目標表示該元素已從 DOM 中刪除（例如，透過 @if）。
我們的指令只會監視一個元素，它不會改變 DOM 結構：它將是一個 屬性指令.
@Directive({
selector: "[visibility]",
standalone: true
})
export class VisibilityDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
private element = inject(ElementRef);
/**
* Emits after the view is initialized.
*/
private afterViewInit$ = new Subject<void>();
/**
* The IntersectionObserver for this element.
*/
private observer: IntersectionObserver | undefined;
/**
* Last known visibility for this element.
* Initially, we don't know.
*/
private isVisible: boolean = undefined;
/**
* If false, once the element becomes visible there will be one emission and then nothing.
* If true, the directive continuously listens to the element and emits whenever it becomes visible or not visible.
*/
visibilityMonitor = input(false);
/**
* Notifies the listener when the element has become visible.
* If "visibilityMonitor" is true, it continuously notifies the listener when the element goes in/out of view.
*/
visibilityChange = output<VisibilityChange>();
}
在上面的程式碼中您會看到：
自然地，我們注入 ElementRef 來取得我們應用指令的 DOM 元素。
在寫 main 方法之前，讓我們先處理一下指令的生命週期。
ngOnInit(): void {
this.reconnectObserver();
}
ngOnChanges(): void {
this.reconnectObserver();
}
ngAfterViewInit(): void {
this.afterViewInit$.next();
}
ngOnDestroy(): void {
// Disconnect and if visibilityMonitor is true, notify the listener
this.disconnectObserver();
if (this.visibilityMonitor) {
this.visibilityChange.emit({
isVisible: false,
target: undefined
});
}
}
private reconnectObserver(): void {}
private disconnectObserver(): void {}
現在發生的事情是這樣的：
這是我們指令的核心。我們的 reconnectObserver 方法將是開始觀察的方法！它會是這樣的：
private reconnectObserver(): void {
// Disconnect an existing observer
this.disconnectObserver();
// Sets up a new observer
this.observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
const { isIntersecting: isVisible, target } = entry;
const hasChangedVisibility = isVisible !== this.isVisible;
const shouldEmit = isVisible || (!isVisible && this.visibilityMonitor);
if (hasChangedVisibility && shouldEmit) {
this.visibilityChange.emit({
isVisible,
target: target as HTMLElement
});
this.isVisible = isVisible;
}
// If visilibilyMonitor is false, once the element is visible we stop.
if (isVisible && !this.visibilityMonitor) {
observer.disconnect();
}
});
});
// Start observing once the view is initialized
this.afterViewInit$.subscribe(() => {
this.observer?.observe(this.element.nativeElement);
});
}
相信我，它並不像看起來那麼複雜！機轉如下：
最後，讓我們實作斷開觀察者連結的方法，簡單：
private disconnectObserver(): void {
if (this.observer) {
this.observer.disconnect();
this.observer = undefined;
}
}
這是完整的指令。這只是一個練習，所以可以隨意將其更改為您喜歡的任何內容！
type VisibilityChange =
| {
isVisible: true;
target: HTMLElement;
}
| {
isVisible: false;
target: HTMLElement | undefined;
};
@Directive({
selector: "[visibility]",
standalone: true
})
export class VisibilityDirective
implements OnChanges, OnInit, AfterViewInit, OnDestroy {
private element = inject(ElementRef);
/**
* Emits after the view is initialized.
*/
private afterViewInit$ = new Subject();
/**
* The IntersectionObserver for this element.
*/
private observer: IntersectionObserver | undefined;
/**
* Last known visibility for this element.
* Initially, we don't know.
*/
private isVisible: boolean = undefined;
/**
* If false, once the element becomes visible there will be one emission and then nothing.
* If true, the directive continuously listens to the element and emits whenever it becomes visible or not visible.
*/
visibilityMonitor = input(false);
/**
* Notifies the listener when the element has become visible.
* If "visibilityMonitor" is true, it continuously notifies the listener when the element goes in/out of view.
*/
visibilityChange = output();
ngOnInit(): void {
this.reconnectObserver();
}
ngOnChanges(): void {
this.reconnectObserver();
}
ngAfterViewInit(): void {
this.afterViewInit$.next(true);
}
ngOnDestroy(): void {
// Disconnect and if visibilityMonitor is true, notify the listener
this.disconnectObserver();
if (this.visibilityMonitor) {
this.visibilityChange.emit({
isVisible: false,
target: undefined
});
}
}
private reconnectObserver(): void {
// Disconnect an existing observer
this.disconnectObserver();
// Sets up a new observer
this.observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
const { isIntersecting: isVisible, target } = entry;
const hasChangedVisibility = isVisible !== this.isVisible;
const shouldEmit = isVisible || (!isVisible && this.visibilityMonitor);
if (hasChangedVisibility && shouldEmit) {
this.visibilityChange.emit({
isVisible,
target: target as HTMLElement
});
this.isVisible = isVisible;
}
// If visilibilyMonitor is false, once the element is visible we stop.
if (isVisible && !this.visibilityMonitor) {
observer.disconnect();
}
});
});
// Start observing once the view is initialized
this.afterViewInit$.subscribe(() => {
this.observer?.observe(this.element.nativeElement);
});
}
private disconnectObserver(): void {
if (this.observer) {
this.observer.disconnect();
this.observer = undefined;
}
}
}
以上是Angular LAB：讓我們建立一個可見性指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！
