Tabs 切换标签的时候，提供一个类似 Router 中的 CanDeactivate 钩子

[danranVm]

What problem does this feature solve?

需求：在切换标签之前，需要做一些验证，只有验证通过的情况下，才可以离开当前标签。

What does the proposed API look like?

<nz-tabset [nzCanChange]="canChange">
  <nz-tab nzTitle="Tab 1" [nzCanDeselect]="canDeselect">
    Content of Tab Pane 1
  </nz-tab>
  <nz-tab nzTitle="Tab 2">
    Content of Tab Pane 2
  </nz-tab>
  <nz-tab nzTitle="Tab 3">
    Content of Tab Pane 3
  </nz-tab>
</nz-tabset>

export type ShouldPerformSelectionFn = (fromIndex: number, toIndex: number) => Observable<boolean> | Promise<boolean> | boolean;

canChange: ShouldPerformSelectionFn = () => {
  if (!isChange) return true

  return new Observable(observer => {
    this.modalService.confirm({
      nzTitle: '你有修改的内容尚未保存，确定离开当前标签？',
      nzOnOk: () => {
        observer.next(true)
        observer.complete()
      },
      nzOnCancel: () => {
        observer.next(false)
        observer.complete()
      },
    })
  })
}

[zorro-bot]

Translation of this issue:

Tabs tag switching time, a similar hook Router in CanDeactivate

What problem does this feature solve?

Requirements: Before switching labels, need to do some validation, only in the case of verified before they can leave the current tab.

What does the proposed API look like?

`Html     <Nz-tabset (nzChangeBefore) = "onChangeBefore ($ event)">       <Nz-tab nzTitle = "Tab 1" (nzDeselectBefore) = "onDeselectBefore ($ event)">         Content of Tab Pane 1       </ Nz-tab>       <Nz-tab nzTitle = "Tab 2">         Content of Tab Pane 2       </ Nz-tab>       <Nz-tab nzTitle = "Tab 3">         Content of Tab Pane 3       </ Nz-tab>     </ Nz-tabset> `

`Ts   onChangeBefore (): Observable <boolean> | boolean {     if (! isChange) {       return true     } Else {       return new Observable (observer => {         this.modalService.confirm ({           nzTitle: 'You have to modify the content has not been saved, determined to leave the current label? '           nzOnOk: () => {             observer.next (true)             observer.complete ()           },           nzOnCancel: () => {             observer.next (false)             observer.complete ()           },         })       })    }   } `

[wzhudev]

感觉函数签名最好是这样：

export type ShouldPerformSelectionFn = (fromIndex: number, toIndex: number) => boolean | Promise<boolean>;

属性应该是个 Input。

[danranVm]

@wendzhue 嗯。是的，我修改一下。