angular中使用antd的tooltip，主動關閉/開啟toolTip框的操作辦法

munergs發表於2022-11-23
Angular

在絕大部分情況下，antd的tooltip都表現的很好，十分好用，但是在一些tooltip在需要跳轉到其他頁面的按鈕上的時候，跳轉以後tooltip也會有持續存在，不消失的問題，所以這時候就需要能夠在點選的時候主動關閉tooltip

不囉嗦，直接上程式碼：

//html
<button nz-button nzType="default" nzDanger style="margin: 5px;"
#toolTip="nzTooltip" nzTooltipTitle="測試" nz-tooltip 
(click)="testBtn()">測試用</button>

//ts
@ViewChild('toolTip',{static:false}) toolTip!:NzTooltipBaseDirective;

testBtn(){
    this.toolTip.hide();
}

要注意的點就是：html中繫結的物件需要為nzTooltip，注意大小寫。ts中static要麼不寫，要麼為false，一旦寫了true那就會報toolTip未定義的問題。

效果如下，紅色的是配置了點選關閉的操作

多提一嘴，如果在angular使用ngfor批次生成的tooltip，如果按照上面寫的@viewChild進行關閉操作的話，就只有第一個會觸發關閉，這時候需要將程式碼改為
@ViewChildren('toolTip') toolTip!:QueryList<NzTooltipBaseDirective>
同時ts中修改按鈕操作為
this.toolTip.forEach(item=>{item.hide()})

完。

相關文章