feat(module:tabs): add router exact active parameter

close NG-ZORRO#3858
wzhudev · Jul 25, 2019 · 4981eb9 · 4981eb9
1 parent 0b27681
commit 4981eb9
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/components/tabs/doc/index.en-US.md b/components/tabs/doc/index.en-US.md
@@ -40,6 +40,7 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
 | `[nzHideAll]` | Whether hide all tabs | `boolean` | `false` |
 | `[nzShowPagination]` | Whether show pre or next button when exceed display area | `boolean` | `true` |
 | `[nzLinkRouter]` | Link with Angular router. It supports child mode and query param mode | `boolean` | `false` ||
+| `[nzLinkExact]` | Use exact routing matching | `boolean` | `true` ||
 | `(nzSelectedIndexChange)` | Current tab's index change callback | `EventEmitter<number>` | - |
 | `(nzSelectChange)` | Current tab's change callback | `EventEmitter<{nzSelectedIndex: number,tab: NzTabComponent}>` | - |
 | `(nzOnNextClick)` | Callback executed when next button is clicked | `EventEmitter<void>` | - |

diff --git a/components/tabs/doc/index.zh-CN.md b/components/tabs/doc/index.zh-CN.md
@@ -43,6 +43,7 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
 | `[nzHideAll]` | 是否隐藏所有tab内容 | `boolean` | `false` |
 | `[nzShowPagination]` | 是否超出范围时显示pre和next按钮 | `boolean` | `true` |
 | `[nzLinkRouter]` | 与 Angular 路由联动 | `boolean` | `false` ||
+| `[nzLinkExact]` | 以严格匹配模式确定联动的路由 | `boolean` | `true` ||
 | `(nzSelectedIndexChange)` | 当前激活 tab 面板的 序列号变更回调函数 | `EventEmitter<number>` | - |
 | `(nzSelectChange)` | 当前激活 tab 面板变更回调函数 | `EventEmitter<{nzSelectedIndex: number,tab: NzTabComponent}>` | - |
 | `(nzOnNextClick)` | next 按钮被点击的回调 | `EventEmitter<void>` | - |

diff --git a/components/tabs/nz-tabset.component.ts b/components/tabs/nz-tabset.component.ts
@@ -86,6 +86,7 @@ export class NzTabSetComponent
   @ContentChildren(NzTabComponent) listOfNzTabComponent: QueryList<NzTabComponent>;
   @ViewChild(NzTabsNavComponent, { static: false }) nzTabsNavComponent: NzTabsNavComponent;
   @ViewChild('tabContent', { static: false }) tabContent: ElementRef;
+
   @Input() nzTabBarExtraContent: TemplateRef<void>;
   @Input() nzShowPagination = true;
   @Input() nzAnimated: NzAnimatedInterface | boolean = true;
@@ -97,7 +98,7 @@ export class NzTabSetComponent
   @Input() nzType: NzTabType = 'line';
 
   @Input() @InputBoolean() nzLinkRouter = false;
-  @Input() nzQueryParam: string;
+  @Input() @InputBoolean() nzLinkExact = true;
 
   @Output() readonly nzOnNextClick = new EventEmitter<void>();
   @Output() readonly nzOnPrevClick = new EventEmitter<void>();
@@ -340,6 +341,6 @@ export class NzTabSetComponent
   }
 
   private isLinkActive(router: Router): (link?: RouterLink | RouterLinkWithHref) => boolean {
-    return (link?: RouterLink | RouterLinkWithHref) => (link ? router.isActive(link.urlTree, true) : false);
+    return (link?: RouterLink | RouterLinkWithHref) => (link ? router.isActive(link.urlTree, this.nzLinkExact) : false);
   }
 }