From 24bc5e979abe43f948f8a91698c4e497098424f4 Mon Sep 17 00:00:00 2001
From: HyperLifelll9 <hyperlife1119@qq.com>
Date: Mon, 18 Sep 2023 10:11:12 +0800
Subject: [PATCH] refactor(module:breadcrumb): remove redundant dom nodes
 (#8017)

---
 components/breadcrumb/breadcrumb-item.component.ts      | 6 +++---
 components/breadcrumb/breadcrumb-separator.component.ts | 9 ++++-----
 components/breadcrumb/doc/index.en-US.md                | 4 ++--
 components/breadcrumb/doc/index.zh-CN.md                | 2 +-
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/components/breadcrumb/breadcrumb-item.component.ts b/components/breadcrumb/breadcrumb-item.component.ts
index 5f0a4fcdc77..c7853bd9d71 100644
--- a/components/breadcrumb/breadcrumb-item.component.ts
+++ b/components/breadcrumb/breadcrumb-item.component.ts
@@ -19,7 +19,7 @@ import { NzBreadcrumb } from './breadcrumb';
     <ng-container *ngIf="!!nzOverlay; else noMenuTpl">
       <span class="ant-breadcrumb-overlay-link" nz-dropdown [nzDropdownMenu]="nzOverlay">
         <ng-template [ngTemplateOutlet]="noMenuTpl"></ng-template>
-        <span *ngIf="!!nzOverlay" nz-icon nzType="down"></span>
+        <span nz-icon nzType="down"></span>
       </span>
     </ng-container>
 
@@ -29,11 +29,11 @@ import { NzBreadcrumb } from './breadcrumb';
       </span>
     </ng-template>
 
-    <span class="ant-breadcrumb-separator" *ngIf="nzBreadCrumbComponent.nzSeparator">
+    <nz-breadcrumb-separator *ngIf="nzBreadCrumbComponent.nzSeparator">
       <ng-container *nzStringTemplateOutlet="nzBreadCrumbComponent.nzSeparator">
         {{ nzBreadCrumbComponent.nzSeparator }}
       </ng-container>
-    </span>
+    </nz-breadcrumb-separator>
   `
 })
 export class NzBreadCrumbItemComponent {
diff --git a/components/breadcrumb/breadcrumb-separator.component.ts b/components/breadcrumb/breadcrumb-separator.component.ts
index 8ca0fe1dd0c..8f84ea8fb58 100644
--- a/components/breadcrumb/breadcrumb-separator.component.ts
+++ b/components/breadcrumb/breadcrumb-separator.component.ts
@@ -8,10 +8,9 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-breadcrumb-separator',
   exportAs: 'nzBreadcrumbSeparator',
-  template: `
-    <span class="ant-breadcrumb-separator">
-      <ng-content></ng-content>
-    </span>
-  `
+  template: `<ng-content></ng-content>`,
+  host: {
+    class: 'ant-breadcrumb-separator'
+  }
 })
 export class NzBreadCrumbSeparatorComponent {}
diff --git a/components/breadcrumb/doc/index.en-US.md b/components/breadcrumb/doc/index.en-US.md
index 9f19174e67d..71201678182 100755
--- a/components/breadcrumb/doc/index.en-US.md
+++ b/components/breadcrumb/doc/index.en-US.md
@@ -46,7 +46,7 @@ For lazy loading modules, you should write `data` in parent module like this:
 ```ts
 {
   path: 'first',
-  loadChildren: './first/first.module#FirstModule',
+  loadChildren: () => import('./first/first.module').then(m => m.FirstModule),
   data: {
     breadcrumb: 'First'
   },
@@ -87,4 +87,4 @@ use `nzRouteLabelFn` to format breadcrumb label in international application:
 
 // In component
 translateFn = (key:string) => this.yourI18nService.translate(key);
-```
\ No newline at end of file
+```
diff --git a/components/breadcrumb/doc/index.zh-CN.md b/components/breadcrumb/doc/index.zh-CN.md
index 3a903fbc989..bea39df99f4 100755
--- a/components/breadcrumb/doc/index.zh-CN.md
+++ b/components/breadcrumb/doc/index.zh-CN.md
@@ -46,7 +46,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 ```ts
 {
   path: 'first',
-  loadChildren: './first/first.module#FirstModule',
+  loadChildren: () => import('./first/first.module').then(m => m.FirstModule),
   data: {
     breadcrumb: 'First'
   },