关于angular:angular中使用antd的tooltip主动关闭打开toolTip框的操作办法

在绝大部分状况下,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,留神大小写。tsstatic要么不写,要么为false,一旦写了true那就会报toolTip未定义的问题。

成果如下,红色的是配置了点击敞开的操作


多提一嘴,如果在angular应用ngfor批量生成的tooltip,如果依照下面写的@viewChild进行敞开操作的话,就只有第一个会触发敞开,这时候须要将代码改为
@ViewChildren('toolTip') toolTip!:QueryList<NzTooltipBaseDirective>
同时ts中批改按钮操作为
this.toolTip.forEach(item=>{item.hide()})

完。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理