feat(theme:title): add selector property (#1487)

cipchk · web-flow · commit b15f35f66034 · 2022-08-14T15:24:37.000+08:00
diff --git a/packages/theme/src/services/title/index.en-US.md b/packages/theme/src/services/title/index.en-US.md
@@ -23,6 +23,7 @@ Get the `title` value according to the following order:
 | Name                                           | Type       | Description                     |
 | ---------------------------------------------- | ---------- | ------------------------------- |
 | `default`                                      | `property` | Default title of document title |
+| `selector`                                      | `property` | Set the default CSS selector string |
 | `separator`                                    | `property` | Separator                       |
 | `prefix`                                       | `property` | Prefix of document title        |
 | `suffix`                                       | `property` | Suffix of document title        |
diff --git a/packages/theme/src/services/title/index.zh-CN.md b/packages/theme/src/services/title/index.zh-CN.md
@@ -13,7 +13,7 @@ type: Service
 
 根据以下顺序获取 `title` 值：
 
-1. 路由配置 `{ data: { title: 'page name', titleI18n: 'page-name' } }`
+1. 路由配置 `{ data: { title: 'page name', titleI18n: 'page-name' } as RouteTitle }`
 2. 根据当前 URL 解析菜单数据
 3. 页面 `alain-default__content-title` 或 `page-header__title` 中获取 `h1` 内容
 4. 默认标题名
@@ -23,6 +23,7 @@ type: Service
 | 名称                                           | 类型       | 描述           |
 | ---------------------------------------------- | ---------- | -------------- |
 | `default`                                      | `property` | 设置默认标题名 |
+| `selector`                                      | `property` | 设置默认CSS选择器字符串 |
 | `separator`                                    | `property` | 设置分隔符     |
 | `prefix`                                       | `property` | 设置前缀       |
 | `suffix`                                       | `property` | 设置后缀       |
diff --git a/packages/theme/src/services/title/title.service.spec.ts b/packages/theme/src/services/title/title.service.spec.ts
@@ -3,14 +3,15 @@ import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
 
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { AlainThemeModule } from '../../theme.module';
 import { AlainI18NService, AlainI18NServiceFake, ALAIN_I18N_TOKEN } from '../i18n/i18n';
 import { Menu } from '../menu/interface';
 import { MenuService } from '../menu/menu.service';
-import { TitleService } from './title.service';
+import { RouteTitle, TitleService } from './title.service';
 
 describe('Service: Title', () => {
   let getPathByUrlData: NzSafeAny;
@@ -141,6 +142,25 @@ describe('Service: Title', () => {
         tick(srv.DELAY_TIME + 1);
         expect(title.setTitle).toHaveBeenCalledWith(alain);
       }));
+      it('with observable', fakeAsync(() => {
+        genModule([
+          {
+            provide: ActivatedRoute,
+            useValue: {
+              firstChild: {
+                snapshot: {
+                  data: {
+                    title: of('a')
+                  } as RouteTitle
+                }
+              }
+            }
+          }
+        ]);
+        srv.setTitle();
+        tick(srv.DELAY_TIME + 1);
+        expect(title.setTitle).toHaveBeenCalledWith('a');
+      }));
       it('without', fakeAsync(() => {
         genModule([
           {
@@ -210,6 +230,13 @@ describe('Service: Title', () => {
         tick(srv.DELAY_TIME + 1);
         expect(title.setTitle).toHaveBeenCalledWith(notPageName);
       }));
+      it('without custom selector', fakeAsync(() => {
+        genModule([]);
+        srv.selector = 'test';
+        srv.setTitle();
+        tick(srv.DELAY_TIME + 1);
+        expect(title.setTitle).toHaveBeenCalledWith(notPageName);
+      }));
     });
   });
 
diff --git a/packages/theme/src/services/title/title.service.ts b/packages/theme/src/services/title/title.service.ts
@@ -2,20 +2,26 @@ import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable, Injector, OnDestroy, Optional } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription, filter } from 'rxjs';
+import { Observable, of, map, delay, isObservable, switchMap, Subject, takeUntil, Subscription } from 'rxjs';
 
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { AlainI18NService, ALAIN_I18N_TOKEN } from '../i18n/i18n';
 import { MenuService } from '../menu/menu.service';
 
+export interface RouteTitle {
+  title?: string | Observable<string>;
+  titleI18n?: string;
+}
+
 @Injectable({ providedIn: 'root' })
 export class TitleService implements OnDestroy {
   private _prefix: string = '';
   private _suffix: string = '';
   private _separator: string = ' - ';
   private _reverse: boolean = false;
-  private i18n$: Subscription;
+  private destroy$ = new Subject<void>();
+  private tit$?: Subscription;
 
   readonly DELAY_TIME = 25;
 
@@ -28,92 +34,126 @@ export class TitleService implements OnDestroy {
     private i18nSrv: AlainI18NService,
     @Inject(DOCUMENT) private doc: NzSafeAny
   ) {
-    this.i18n$ = this.i18nSrv.change.pipe(filter(() => !!this.i18n$)).subscribe(() => this.setTitle());
+    this.i18nSrv.change.pipe(takeUntil(this.destroy$)).subscribe(() => this.setTitle());
   }
 
-  /** 设置分隔符 */
+  /**
+   * Set separator
+   *
+   * 设置分隔符
+   */
   set separator(value: string) {
     this._separator = value;
   }
 
-  /** 设置前缀 */
+  /**
+   * Set prefix
+   *
+   * 设置前缀
+   */
   set prefix(value: string) {
     this._prefix = value;
   }
 
-  /** 设置后缀 */
+  /**
+   * Set suffix
+   *
+   * 设置后缀
+   */
   set suffix(value: string) {
     this._suffix = value;
   }
 
-  /** 设置是否反转 */
+  /**
+   * Set whether to reverse
+   *
+   * 设置是否反转
+   */
   set reverse(value: boolean) {
     this._reverse = value;
   }
 
-  /** 设置默认标题名 */
+  /**
+   * Set the default CSS selector string
+   *
+   * 设置默认CSS选择器字符串
+   */
+  selector?: string | null;
+
+  /**
+   * Set default title name
+   *
+   * 设置默认标题名
+   */
   default = `Not Page Name`;
 
-  private getByElement(): string {
-    const el = (this.doc.querySelector('.alain-default__content-title h1') ||
-      this.doc.querySelector('.page-header__title')) as HTMLElement;
-    if (el) {
-      let text = '';
-      el.childNodes.forEach(val => {
-        if (!text && val.nodeType === 3) {
-          text = val.textContent!.trim();
+  private getByElement(): Observable<string> {
+    return of('').pipe(
+      delay(this.DELAY_TIME),
+      map(() => {
+        const el = ((this.selector != null ? this.doc.querySelector(this.selector) : null) ||
+          this.doc.querySelector('.alain-default__content-title h1') ||
+          this.doc.querySelector('.page-header__title')) as HTMLElement;
+        if (el) {
+          let text = '';
+          el.childNodes.forEach(val => {
+            if (!text && val.nodeType === 3) {
+              text = val.textContent!.trim();
+            }
+          });
+          return text || el.firstChild!.textContent!.trim();
         }
-      });
-      return text || el.firstChild!.textContent!.trim();
-    }
-    return '';
+        return '';
+      })
+    );
   }
 
-  private getByRoute(): string {
+  private getByRoute(): Observable<string> {
     let next = this.injector.get(ActivatedRoute);
     while (next.firstChild) next = next.firstChild;
-    const data = (next.snapshot && next.snapshot.data) || {};
+    const data: RouteTitle = (next.snapshot && next.snapshot.data) || {};
     if (data.titleI18n && this.i18nSrv) data.title = this.i18nSrv.fanyi(data.titleI18n);
-    return data.title;
+    return isObservable(data.title) ? data.title : of(data.title!);
   }
 
-  private getByMenu(): string {
+  private getByMenu(): Observable<string> {
     const menus = this.menuSrv.getPathByUrl(this.injector.get<Router>(Router).url);
-    if (!menus || menus.length <= 0) return '';
+    if (!menus || menus.length <= 0) return of('');
 
     const item = menus[menus.length - 1];
     let title;
     if (item.i18n && this.i18nSrv) title = this.i18nSrv.fanyi(item.i18n);
-    return title || item.text!;
-  }
-
-  private _setTitle(title?: string | string[]): void {
-    if (!title) {
-      title = this.getByRoute() || this.getByMenu() || this.getByElement() || this.default;
-    }
-    if (title && !Array.isArray(title)) {
-      title = [title];
-    }
-
-    let newTitles: string[] = [];
-    if (this._prefix) {
-      newTitles.push(this._prefix);
-    }
-    newTitles.push(...(title as string[]));
-    if (this._suffix) {
-      newTitles.push(this._suffix);
-    }
-    if (this._reverse) {
-      newTitles = newTitles.reverse();
-    }
-    this.title.setTitle(newTitles.join(this._separator));
+    return of(title || item.text!);
   }
 
   /**
-   * Set the document title, will be delay `25ms`, pls refer to [#1261](https://github.com/ng-alain/ng-alain/issues/1261)
+   * Set the document title
    */
   setTitle(title?: string | string[]): void {
-    setTimeout(() => this._setTitle(title), this.DELAY_TIME);
+    this.tit$?.unsubscribe();
+    this.tit$ = of(title)
+      .pipe(
+        switchMap(tit => (tit ? of(tit) : this.getByRoute())),
+        switchMap(tit => (tit ? of(tit) : this.getByMenu())),
+        switchMap(tit => (tit ? of(tit) : this.getByElement())),
+        map(tit => tit || this.default),
+        map(title => (!Array.isArray(title) ? [title] : title)),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(titles => {
+        let newTitles: string[] = [];
+        if (this._prefix) {
+          newTitles.push(this._prefix);
+        }
+        newTitles.push(...(titles as string[]));
+        if (this._suffix) {
+          newTitles.push(this._suffix);
+        }
+        if (this._reverse) {
+          newTitles = newTitles.reverse();
+        }
+        this.title.setTitle(newTitles.join(this._separator));
+      });
   }
 
   /**
@@ -124,6 +164,8 @@ export class TitleService implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.i18n$.unsubscribe();
+    this.tit$?.unsubscribe();
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }
