要解决Angular 9中的ngbPopover在首次加载时不起作用,需要在ngOnInit生命周期钩子中进行处理,并确保在加载动态内容之后才初始化ngbPopover。
以下是一个示例解决方案:
在组件的HTML文件中,添加一个触发ngbPopover的按钮:
在组件的TypeScript文件中,导入需要的依赖并实现OnInit接口:
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
@ViewChild(NgbPopover) popover: NgbPopover;
ngOnInit() {
// 在ngOnInit生命周期钩子中初始化ngbPopover
setTimeout(() => {
this.popover.ngOnInit();
});
}
}
在上面的示例中,我们使用@ViewChild
装饰器来获取ngbPopover的实例,并在ngOnInit
方法中使用setTimeout
来确保ngbPopover
在动态内容加载之后初始化。
请注意,setTimeout
的目的是在Angular执行变更检测之后,以确保ngbPopover能够正确地初始化。
这样,ngbPopover就可以在首次加载时正常工作,并且在刷新页面后也能正常工作。