feat(module:breadcrumb): support indenpendent separator (#4713)

* chore(module:breadcrumb): refactor breadcrumb * feat(module:breadcrumb): add independent separator component * fix: fix new component not exported
NG-ZORRO · Feb 28, 2020 · 1f490e9 · 1f490e9
1 parent 09bf8f4
commit 1f490e9
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 42 deletions.
diff --git a/...readcrumb/nz-breadcrumb-item.component.ts → ...s/breadcrumb/breadcrumb-item.component.ts b/...readcrumb/nz-breadcrumb-item.component.ts → ...s/breadcrumb/breadcrumb-item.component.ts
@@ -10,15 +10,34 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
 
 import { NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
 
-import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
+import { NzBreadCrumbComponent } from './breadcrumb.component';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-breadcrumb-item',
   exportAs: 'nzBreadcrumbItem',
   preserveWhitespaces: false,
-  templateUrl: './nz-breadcrumb-item.component.html',
+  template: `
+    <ng-container *ngIf="!!nzOverlay; else noMenuTpl">
+      <span class="ant-breadcrumb-overlay-link" nz-dropdown [nzDropdownMenu]="nzOverlay">
+        <ng-template [ngTemplateOutlet]="noMenuTpl"></ng-template>
+        <i *ngIf="!!nzOverlay" nz-icon nzType="down"></i>
+      </span>
+    </ng-container>
+
+    <ng-template #noMenuTpl>
+      <span class="ant-breadcrumb-link">
+        <ng-content></ng-content>
+      </span>
+    </ng-template>
+
+    <span class="ant-breadcrumb-separator" *ngIf="nzBreadCrumbComponent.nzSeparator">
+      <ng-container *nzStringTemplateOutlet="nzBreadCrumbComponent.nzSeparator">
+        {{ nzBreadCrumbComponent.nzSeparator }}
+      </ng-container>
+    </span>
+  `,
   styles: [
     `
       nz-breadcrumb-item:last-child {

diff --git a/components/breadcrumb/breadcrumb-separator.component.ts b/components/breadcrumb/breadcrumb-separator.component.ts
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-breadcrumb-separator',
+  exportAs: 'nzBreadcrumbSeparator',
+  template: `
+    <span class="ant-breadcrumb-separator">
+      <ng-content></ng-content>
+    </span>
+  `
+})
+export class NzBreadCrumbSeparatorComponent {}
diff --git a/...nts/breadcrumb/nz-breadcrumb.component.ts → ...onents/breadcrumb/breadcrumb.component.ts b/...nts/breadcrumb/nz-breadcrumb.component.ts → ...onents/breadcrumb/breadcrumb.component.ts
@@ -38,7 +38,14 @@ export interface BreadcrumbOption {
   selector: 'nz-breadcrumb',
   exportAs: 'nzBreadcrumb',
   preserveWhitespaces: false,
-  templateUrl: './nz-breadcrumb.component.html',
+  template: `
+    <ng-content></ng-content>
+    <ng-container *ngIf="nzAutoGenerate">
+      <nz-breadcrumb-item *ngFor="let breadcrumb of breadcrumbs">
+        <a [attr.href]="breadcrumb.url" (click)="navigate(breadcrumb.url, $event)">{{ breadcrumb.label }}</a>
+      </nz-breadcrumb-item>
+    </ng-container>
+  `,
   styles: [
     `
       nz-breadcrumb {
@@ -49,7 +56,7 @@ export interface BreadcrumbOption {
 })
 export class NzBreadCrumbComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() nzAutoGenerate = false;
-  @Input() nzSeparator: string | TemplateRef<void> = '/';
+  @Input() nzSeparator: string | TemplateRef<void> | null = '/';
   @Input() nzRouteLabel: string = 'breadcrumb';
 
   breadcrumbs: BreadcrumbOption[] | undefined = [];

diff --git a/...onents/breadcrumb/nz-breadcrumb.module.ts → components/breadcrumb/breadcrumb.module.ts b/...onents/breadcrumb/nz-breadcrumb.module.ts → components/breadcrumb/breadcrumb.module.ts
@@ -14,12 +14,13 @@ import { NzOutletModule, NzOverlayModule } from 'ng-zorro-antd/core';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
-import { NzBreadCrumbItemComponent } from './nz-breadcrumb-item.component';
-import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
+import { NzBreadCrumbItemComponent } from './breadcrumb-item.component';
+import { NzBreadCrumbSeparatorComponent } from './breadcrumb-separator.component';
+import { NzBreadCrumbComponent } from './breadcrumb.component';
 
 @NgModule({
   imports: [CommonModule, NzOutletModule, OverlayModule, NzOverlayModule, NzDropDownModule, NzIconModule],
-  declarations: [NzBreadCrumbComponent, NzBreadCrumbItemComponent],
-  exports: [NzBreadCrumbComponent, NzBreadCrumbItemComponent]
+  declarations: [NzBreadCrumbComponent, NzBreadCrumbItemComponent, NzBreadCrumbSeparatorComponent],
+  exports: [NzBreadCrumbComponent, NzBreadCrumbItemComponent, NzBreadCrumbSeparatorComponent]
 })
 export class NzBreadCrumbModule {}
diff --git a/components/breadcrumb/nz-breadcrumb.spec.ts → components/breadcrumb/breadcrumb.spec.ts b/components/breadcrumb/nz-breadcrumb.spec.ts → components/breadcrumb/breadcrumb.spec.ts
@@ -9,11 +9,11 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 import { NzDemoBreadcrumbDropdownComponent } from './demo/dropdown';
 
+import { NzBreadCrumbItemComponent } from './breadcrumb-item.component';
+import { NzBreadCrumbComponent } from './breadcrumb.component';
+import { NzBreadCrumbModule } from './breadcrumb.module';
 import { NzDemoBreadcrumbBasicComponent } from './demo/basic';
 import { NzDemoBreadcrumbSeparatorComponent } from './demo/separator';
-import { NzBreadCrumbItemComponent } from './nz-breadcrumb-item.component';
-import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
-import { NzBreadCrumbModule } from './nz-breadcrumb.module';
 
 describe('breadcrumb', () => {
   describe('basic', () => {

diff --git a/components/breadcrumb/demo/separator-independent.md b/components/breadcrumb/demo/separator-independent.md
@@ -0,0 +1,15 @@
+---
+order: 6
+title:
+  zh-CN: 独立的分隔符
+  en-US: Configuring the Separator Independently
+---
+
+## zh-CN
+
+使用 `nz-breadcrumb-separator` 可以自定义分隔符。
+
+## en-US
+
+The separator can be customized by using the component `nz-breadcrumb-separator`.
+
diff --git a/components/breadcrumb/demo/separator-independent.ts b/components/breadcrumb/demo/separator-independent.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-breadcrumb-separator-independent',
+  template: `
+    <nz-breadcrumb [nzSeparator]="null">
+      <nz-breadcrumb-item>
+        Location
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-separator>
+        :
+      </nz-breadcrumb-separator>
+      <nz-breadcrumb-item>
+        <a>Application Center</a>
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-separator>
+        /
+      </nz-breadcrumb-separator>
+      <nz-breadcrumb-item>
+        Application List
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-separator>
+        /
+      </nz-breadcrumb-separator>
+      <nz-breadcrumb-item>
+        An Application
+      </nz-breadcrumb-item>
+    </nz-breadcrumb>
+  `
+})
+export class NzDemoBreadcrumbSeparatorIndependentComponent {}
diff --git a/components/breadcrumb/doc/index.en-US.md b/components/breadcrumb/doc/index.en-US.md
@@ -23,7 +23,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| `[nzSeparator]` | Custom separator | `string \| TemplateRef<void>` | `'/'` |
+| `[nzSeparator]` | Custom separator | `string \| TemplateRef<void> \| null` | `'/'` |
 | `[nzAutoGenerate]` | Auto generate breadcrumb | `boolean` | `false` |
 | `[nzRouteLabel]` | Name of property that determines displayed text in routing config. It should be used when `nzAutoGenerate` is `true` | `string` | `'breadcrumb'` |
 

diff --git a/components/breadcrumb/doc/index.zh-CN.md b/components/breadcrumb/doc/index.zh-CN.md
@@ -23,7 +23,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| `[nzSeparator]` | 分隔符自定义 | `string \| TemplateRef<void>` | `'/'` |
+| `[nzSeparator]` | 分隔符自定义 | `string \| TemplateRef<void> \| null` | `'/'` |
 | `[nzAutoGenerate]` | 自动生成 Breadcrumb | `boolean` | `false` |
 | `[nzRouteLabel]` | 自定义 route data 属性名称, `nzAutoGenerate` 为 `true` 时才生效 | `string` | `'breadcrumb'` |
 

diff --git a/components/breadcrumb/nz-breadcrumb-item.component.html b/components/breadcrumb/nz-breadcrumb-item.component.html
diff --git a/components/breadcrumb/nz-breadcrumb.component.html b/components/breadcrumb/nz-breadcrumb.component.html
diff --git a/components/breadcrumb/public-api.ts b/components/breadcrumb/public-api.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-breadcrumb-item.component';
-export * from './nz-breadcrumb.component';
-export * from './nz-breadcrumb.module';
+export * from './breadcrumb-item.component';
+export * from './breadcrumb.component';
+export * from './breadcrumb.module';
+export * from './breadcrumb-separator.component';