当组件可见时调用指令

Question

我创建了一个指令，当某些组件可见时防止滚动(angular 12)，下面是我的代码:

import { DOCUMENT } from '@angular/common';
import { Directive, HostListener, Inject, Renderer2 } from '@angular/core';
@Directive({
selector: '[appRemoveScroll]'
})
export class RemoveScrollDirective {
constructor(
@Inject(DOCUMENT) private document: Document,
private renderer: Renderer2,
) { }
@HostListener('visible', ['$event'])
toggleNoScroll(visible: boolean) {
console.log("called", visible)
if (visible) {
this.renderer.addClass(this.document.body, 'no-scroll');
} else {
this.renderer.removeClass(this.document.body, 'no-scroll');
}
}
}

然后我将此指令添加到使用*ngIf切换的组件:

<div *ngIf="displayProductLayover" id="product-layover" appRemoveScroll>
<app-layover [heading]="layoverHeading">
// More code here

我没有得到任何错误，但这是不工作，我没有得到任何控制台语句。我哪里做错了?

Answer 1

像div这样的DOM元素不会发出visible事件，所以@HostListener('visible', ['$event'])不会被调用