angular - 开始时打开工具提示

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 Hook 中调用 this.tooltip.open();，而不是 ngOnInit。 DOM 可能未在 ngOnInit 中准备就绪。所以，解决方案是:

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