Ng-zorro-antd: Allow `nzSelectedIndex` of `nz-tabset` to be a string ( such as nzTitle)

[CarterLi]

What problem does this feature solve?

Sometimes we need to display the title of active nz-tab somewhere (eg. in breadcrumbs), there is no easy way to get its value, other than binding (nzSelectChange) or use [(nzSelectedIndex)] with a explicit defined tabTitles array.

有时候我需要在别的地方显示当前激活标签页的标题（例如在面包屑里），但是没有一种简单的方式获取这个值。除非绑定 (nzSelectChange)，或者使用 [(nzSelectedIndex)] 配合自己定义的 tabTitles 数组（因为同样没有简单的方式直接获取所有标签页的标题数组）

In addition, numeric indexes are not intuitive. Tab order may change and it's more complicate with *ngIf.

另外，数值下标并不是很直观，而且标签页的顺序可能会根据用户习惯调整。如果 nz-tab 还要配合 *ngIf 使用，数值下标的指向就会更加复杂。例如

<nz-tabset>
  <nz-tab nzTitle="tab1" *ngIf="condition"></nz-tab>
  <nz-tab nzTitle="tab2" *ngIf="true"></nz-tab>
<nz-tabset>

在 tab1 存在的时候，tab2 的下标是 1，当 tab1 不存在的时候，tab2 的下标变成了 0

nzTitles or other user defined strings are changeless thus can be a better index to specify a tab.

nzTitle 或者其他用户指定的字符串却不会改变。所以我认为用户自己指定的字符串比自生成的数值下标作为tab的索引更好一些。

We are already using code below to acquire the active tab title, but I think library support can be a much better and cleaner option.

我们已经使用如下代码来获取、设置激活标签页的标题，但我认为直接的库支持会是一个更好的、更干净的选择。

import { Directive, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
import { NzTabComponent, NzTabSetComponent } from 'ng-zorro-antd';

@Directive({
  selector: '[setTabTitle]',
})
export class TabTitleDirective implements OnInit {
  @Output() setTabTitleChange = new EventEmitter<string | TemplateRef<void>>();

  private tabTitle: string | TemplateRef<void>;

  constructor(private nzTab: NzTabComponent) { }

  ngOnInit() {
    setTimeout(() => {
      const tabset = (this.nzTab as any).nzTabSetComponent as NzTabSetComponent;
      const tabindex = tabset.listOfNzTabComponent.indexOf(this.nzTab);
      if (this.tabTitle == null) {
        if (tabindex === tabset.nzSelectedIndex) {
          this.setTabTitleChange.emit(this.nzTab.nzTitle);
        }
      } else if (this.tabTitle === this.nzTab.nzTitle) {
        tabset.nzSelectedIndex = tabindex;
      }
    });

    this.nzTab.nzSelect.subscribe(() => {
      setTimeout(() => {
        // Hack for ExpressionChangedAfterItHasBeenCheckedError
        if (this.nzTab.nzTitle !== this.tabTitle) {
          this.setTabTitleChange.emit(this.nzTab.nzTitle);
        }
      });
    });
  }

  @Input()
  set setTabTitle(value: string | TemplateRef<void>) {
    this.tabTitle = value;
    if (this.nzTab.nzTitle === value) {
      const tabset = (this.nzTab as any).nzTabSetComponent as NzTabSetComponent;
      const tabindex = tabset.listOfNzTabComponent.indexOf(this.nzTab);
      tabset.nzSelectedIndex = tabindex;
    }
  }
}

<nz-tab [(setTabTitle)]="this.activeTab"></nz-tab>

What does the proposed API look like?

<nz-tab [nzIndex]="User-defined value" />

When being activated, nzSelectedIndex is set to the value of nzIndex.

If not specified, the value of nzIndex is the numeric index of nz-tab, for backward compatibility

[vthinkxie]

should be [nzKey], will talk about it later.

[Iyashu5040]

I was just about to log the same issue. Got redirected here from the similar issues suggestions from the issue helper page.

In our case we'd like to be able to set the selected tab based on some identifier (like nzKey) instead of an index. We pre-select tabs based on the URL # segment but the number of tabs is dynamic based on context, so we need to do some calculations to figure out what the index of the tab is we want to select. It would make things much simpler and cleaner if we could use nzKey.