开始时打开工具提示

Question

如何在打开组件时从 ngboostrap 打开工具提示。

我尝试在 ngOnInit 函数中调用 open 方法，但它没有显示。

我在单击按钮时尝试了相同的方法并且有效（基于示例：https://ng-bootstrap.github.io/app/components/tooltip/demos/tplwithcontext/plnkr.html）

代码：

export class TooltipComponent implements OnInit {
    @ViewChild('tleft') public tooltip: NgbTooltip;

    ngOnInit() {
        this.tooltip.open();
    }
}

模板：

<p>
  <strong ngbTooltip="Tooltip on left" #tleft="ngbTooltip" triggers="manual">Tooltip is here</strong>?
</p>
<button type="button" class="btn btn-secondary" (click)="open()">
  Open
</button>

Answer 1

您应该在 ngAfterViewInit 挂钩中调用 this.tooltip.open();，而不是 ngOnInit。 DOM 可能未在 ngOnInit 中准备就绪。所以，解决方案是：

ngAfterViewInit() {
    this.tooltip.open();
}

开始时打开工具提示

open tooltip on start

tooltip

ng-bootstrap

angular