ng-zorro-antd - 如何使用 nz-tabset 实现离开前的保存？

Question

我正在使用 zorro antd 实现多标签功能，我想在用户有未保存的更改时警告我的用户，并且只有在用户确认后才离开标签。离开选项卡之前似乎没有回调，（nzSelectChange）是选项卡更改后而不是之前的回调。那么如何使用 zorro 的 nz-tabset 实现这样的功能呢？

Answer 1

NzTab 有一个(nzClick)EventEmitter 来处理选项卡标题单击事件，但它不会发出本机鼠标事件，因此我们无法捕获本机事件。但是我发现 nz-tab[nzTitle]属性可以是 a TemplateRef，所以我们可以在触发 tab-set 之前构建我们的标签标题并处理点击事件(nzSelectChange)。例如：

<ng-template #tabTitle1>
   <div (click)="beforeActivateTab(0, $event)">Tab 1</div>
</ng-template>

而且，我构建了一个在线示例，您可以在此处访问： https ://stackblitz.com/edit/ng-zorro-antd-start-drc5uf