feat(abc:page-header): add titleSub property

packages/abc/page-header/demo/structure.md

@@ -16,6 +16,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   template: `
     <page-header
       [title]="'title'"
+      [titleSub]="'titleSub'"
       [breadcrumb]="breadcrumb"
       [logo]="logo"
       [action]="action"

packages/abc/page-header/index.en-US.md

@@ -15,6 +15,7 @@ The page header is used to declare the subject of the page and contains the most
 | Property | Description | Type | Default | Global Config |
 |----------|-------------|------|---------|---------------|
 | `[title]` | Title of the page | `string,TemplateRef<void>` | - | ✅ |
+| `[titleSub]` | Sub title of the page | `string,TemplateRef<void>` | - | ✅ |
 | `[autoTitle]` | Whether to automatically generate the title and locate it from the main menu with the current route | `boolean` | `true` | ✅ |
 | `[syncTitle]` | Whether to automatically synchronize the title to `TitleService`, `ReuseService`, only valid when `title` is of type `string` | `boolean` | `true` | ✅ |
 | `[home]` | Home page text of the breadcrumb, if empty is specified, it will not be displayed | `string` | `首页` | ✅ |

packages/abc/page-header/index.zh-CN.md

@@ -15,6 +15,7 @@ module: import { PageHeaderModule } from '@delon/abc/page-header';
 | 成员 | 说明 | 类型 | 默认值 | 全局配置 |
 |----|----|----|-----|------|
 | `[title]` | 标题名 | `string,TemplateRef<void>` | - | ✅ |
+| `[titleSub]` | 子标题 | `string,TemplateRef<void>` | - | ✅ |
 | `[autoTitle]` | 是否自动生成标题，以当前路由从主菜单中定位 | `boolean` | `true` | ✅ |
 | `[syncTitle]` | 是否自动将标题同步至 `TitleService`、`ReuseService` 下，仅 `title` 为 `string` 类型时有效 | `boolean` | `true` | ✅ |
 | `[home]` | 首页文本，若指定空表示不显示 | `string` | `首页` | ✅ |

packages/abc/page-header/page-header.component.html

@@ -29,7 +29,12 @@
           <div class="page-header__main">
             <div class="page-header__row">
               <h1 *ngIf="_titleVal || _titleTpl" class="page-header__title">
-                <ng-container *ngIf="_titleVal; else _titleTpl">{{ _titleVal }}</ng-container>
+                <ng-container *ngIf="_titleVal; else _titleTpl">
+                  {{ _titleVal }}
+                  <small *ngIf="titleSub">
+                    <ng-container *nzStringTemplateOutlet="titleSub">{{ titleSub }}</ng-container>
+                  </small>
+                </ng-container>
               </h1>
               <div *ngIf="action" class="page-header__action">
                 <ng-template [ngTemplateOutlet]="action" />

packages/abc/page-header/page-header.component.ts

@@ -80,6 +80,7 @@ export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit {
       this._titleVal = this._title;
     }
   }
+  @Input() titleSub?: string | TemplateRef<void> | null;
 
   @Input() @InputBoolean() loading = false;
   @Input() @InputBoolean() wide = false;

packages/abc/page-header/page-header.module.ts

@@ -5,14 +5,23 @@ import { RouterModule } from '@angular/router';
 
 import { NzAffixModule } from 'ng-zorro-antd/affix';
 import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
 
 import { PageHeaderComponent } from './page-header.component';
 
 const COMPONENTS = [PageHeaderComponent];
 
 @NgModule({
-  imports: [CommonModule, RouterModule, ObserversModule, NzAffixModule, NzSkeletonModule, NzBreadCrumbModule],
+  imports: [
+    CommonModule,
+    RouterModule,
+    ObserversModule,
+    NzAffixModule,
+    NzSkeletonModule,
+    NzBreadCrumbModule,
+    NzOutletModule
+  ],
   declarations: COMPONENTS,
   exports: COMPONENTS
 })

packages/abc/page-header/page-header.spec.ts

@@ -102,6 +102,11 @@ describe('abc: page-header', () => {
           isExists('.page-header__title', false);
         });
       });
+      it('#titleSub', () => {
+        context.titleSub = 'sub';
+        fixture.detectChanges();
+        isExists('.page-header__title small');
+      });
 
       ['breadcrumb', 'logo', 'action', 'content', 'extra', 'tab'].forEach(type => {
         it(`#${type}`, () => isExists(`.${type}`));
@@ -418,6 +423,7 @@ class TestBaseComponent {
   @ViewChild('comp', { static: true })
   comp!: PageHeaderComponent;
   title: string | null = '所属类目';
+  titleSub?: string | null;
   autoBreadcrumb?: boolean;
   autoTitle?: boolean;
   syncTitle?: boolean;
@@ -434,6 +440,7 @@ class TestBaseComponent {
     <page-header
       #comp
       [title]="title"
+      [titleSub]="titleSub"
       [autoTitle]="autoTitle"
       [syncTitle]="syncTitle"
       [autoBreadcrumb]="autoBreadcrumb"

packages/abc/page-header/style/index.less

@@ -51,6 +51,7 @@
 
     small {
       padding-left: @layout-gutter;
+      color: @page-header-title-sub-color;
       font-weight: normal;
       font-size: 14px;
     }

packages/abc/theme-default.less

@@ -57,6 +57,7 @@
 @page-header-bg: #fff;
 @page-header-padding: 16px 32px 0 32px;
 @page-header-wide: 1200px;
+@page-header-title-sub-color: fade(@heading-color, 40%);
 
 // quick-menu
 // --