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

45次阅读

共计 685 个字符，预计需要花费 2 分钟才能阅读完成。

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

完。

正文完