在Angular中,可以使用*ngIf指令来根据条件动态显示或隐藏HTML元素。默认情况下,*ngIf会立即检查条件,并根据结果决定是否显示元素。
如果希望在点击后才检查原生元素,可以使用Angular的事件绑定和模板引用变量来达到目的。
以下是一个解决方法的代码示例:
在组件模板中:
我是一个原生元素
在组件类中:
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
@ViewChild('myElement') myElement: ElementRef;
elementVisible: boolean = false;
checkElementVisibility() {
this.elementVisible = this.myElement.nativeElement.offsetWidth > 0 && this.myElement.nativeElement.offsetHeight > 0;
}
}
在上述代码中,我们使用了一个模板引用变量#myElement
来引用原生元素。在按钮的点击事件checkElementVisibility()
中,我们使用nativeElement
来访问原生元素,并检查其offsetWidth
和offsetHeight
属性来确定元素是否可见。根据检查结果,我们更新elementVisible
变量来控制*ngIf指令是否显示该元素。
这样,当点击按钮时,才会检查原生元素的可见性,并根据结果显示或隐藏该元素。