在绝大部分状况下,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()})
完。