feat(theme:layout-default): add fetching property

packages/theme/layout-default/index.en-US.md

@@ -102,6 +102,8 @@ The layout can be dynamically managed at runtime through the `LayoutDefaultServi
 | `[nav]` | Nav | `TemplateRef<void>` | `-` |
 | `[content]` | Content | `TemplateRef<void>` | `-` |
 | `[customError]` | Custom exception routing error message, can't show when is `null` | `string, null` | `Could not load ${evt.url} route` |
+| `[fetchingStrictly]` | Precise check top loading animation state | `boolean` | `false` |
+| `[fetching]` | Top loading animation state | `boolean` | `false` |
 
 ### LayoutDefaultOptions
 

packages/theme/layout-default/index.zh-CN.md

@@ -102,6 +102,8 @@ export class LayoutBasicComponent {
 | `[nav]` | 导航信息 | `TemplateRef<void>` | `-` |
 | `[content]` | 内容信息 | `TemplateRef<void>` | `-` |
 | `[customError]` | 自定义异常路由错误消息，当 `null` 时表示不显示错误消息 | `string, null` | `Could not load ${evt.url} route` |
+| `[fetchingStrictly]` | 是否完全受控顶部加载动画状态 | `boolean` | `false` |
+| `[fetching]` | 顶部加载动画状态 | `boolean` | `false` |
 
 ### LayoutDefaultOptions
 

packages/theme/layout-default/layout.component.spec.ts

@@ -136,15 +136,15 @@ describe('theme: layout-default', () => {
     }));
 
     it('should toggle fetching status when load lzay config', fakeAsync(() => {
-      expect(context.comp.isFetching).toBe(true);
+      expect(context.comp.showFetching).toBe(true);
       lazyEnd();
     }));
 
     describe('when error', () => {
       it('should be invalid module', fakeAsync(() => {
         const spy = spyOn(msgSrv, 'error');
         lazyError();
-        expect(context.comp.isFetching).toBe(false);
+        expect(context.comp.showFetching).toBe(false);
         expect(spy).toHaveBeenCalled();
         expect(spy.calls.first().args[0]).toContain('Could not load ');
         lazyEnd();
@@ -154,7 +154,7 @@ describe('theme: layout-default', () => {
         context.customError = 'test';
         fixture.detectChanges();
         lazyError();
-        expect(context.comp.isFetching).toBe(false);
+        expect(context.comp.showFetching).toBe(false);
         expect(spy).toHaveBeenCalled();
         expect(spy.calls.first().args[0]).toBe('test');
         lazyEnd();
@@ -164,16 +164,27 @@ describe('theme: layout-default', () => {
         context.customError = null;
         fixture.detectChanges();
         lazyError();
-        expect(context.comp.isFetching).toBe(false);
+        expect(context.comp.showFetching).toBe(false);
         expect(spy).not.toHaveBeenCalled();
         lazyEnd();
       }));
       it('should be cancel load config', fakeAsync(() => {
         lazyCancel();
-        expect(context.comp.isFetching).toBe(false);
+        expect(context.comp.showFetching).toBe(false);
         lazyEnd();
       }));
     });
+
+    it('#fetchingStrictly', () => {
+      const cls = '.alain-default__progress-bar';
+      context.fetchingStrictly = true;
+      context.fetching = true;
+      fixture.detectChanges();
+      page.expectEl(cls, true);
+      context.fetching = false;
+      fixture.detectChanges();
+      page.expectEl(cls, false);
+    });
   });
 
   class PageObject {
@@ -197,6 +208,8 @@ describe('theme: layout-default', () => {
       [nav]="nav"
       [content]="content"
       [customError]="customError"
+      [fetchingStrictly]="fetchingStrictly"
+      [fetching]="fetching"
     >
       <layout-default-header-item direction="left">
         <span class="header-left">left</span>
@@ -227,4 +240,6 @@ class TestComponent {
   nav?: TemplateRef<void> | null;
   content?: TemplateRef<void> | null;
   customError?: string | null;
+  fetchingStrictly = false;
+  fetching = false;
 }

packages/theme/layout-default/layout.component.ts

@@ -19,10 +19,11 @@ import {
   Router,
   Event
 } from '@angular/router';
-import { Subject, takeUntil } from 'rxjs';
+import { Subject, filter, takeUntil } from 'rxjs';
 
 import { SettingsService } from '@delon/theme';
 import { updateHostClass } from '@delon/util/browser';
+import { BooleanInput, InputBoolean } from '@delon/util/decorator';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
@@ -34,7 +35,7 @@ import { LayoutDefaultOptions } from './types';
   selector: 'layout-default',
   exportAs: 'layoutDefault',
   template: `
-    <div class="alain-default__progress-bar" *ngIf="isFetching"></div>
+    <div class="alain-default__progress-bar" *ngIf="showFetching"></div>
     <layout-default-header *ngIf="!opt.hideHeader" [items]="headerItems"></layout-default-header>
     <div *ngIf="!opt.hideAside" class="alain-default__aside">
       <div class="alain-default__aside-wrap">
@@ -59,6 +60,9 @@ import { LayoutDefaultOptions } from './types';
   `
 })
 export class LayoutDefaultComponent implements OnDestroy {
+  static ngAcceptInputType_fetchingStrictly: BooleanInput;
+  static ngAcceptInputType_fetching: BooleanInput;
+
   @ContentChildren(LayoutDefaultHeaderItemComponent, { descendants: false })
   headerItems!: QueryList<LayoutDefaultHeaderItemComponent>;
 
@@ -75,9 +79,16 @@ export class LayoutDefaultComponent implements OnDestroy {
   @Input() nav: TemplateRef<void> | null = null;
   @Input() content: TemplateRef<void> | null = null;
   @Input() customError?: string | null;
+  @Input() @InputBoolean() fetchingStrictly = false;
+  @Input() @InputBoolean() fetching = false;
 
   private destroy$ = new Subject<void>();
-  isFetching = false;
+  private isFetching = false;
+
+  get showFetching(): boolean {
+    if (this.fetchingStrictly) return this.fetching;
+    return this.isFetching;
+  }
 
   get collapsed(): boolean {
     return this.settings.layout.collapsed;
@@ -100,8 +111,13 @@ export class LayoutDefaultComponent implements OnDestroy {
     @Inject(DOCUMENT) private doc: NzSafeAny,
     private srv: LayoutDefaultService
   ) {
-    router.events.pipe(takeUntil(this.destroy$)).subscribe(ev => this.processEv(ev));
     const { destroy$ } = this;
+    router.events
+      .pipe(
+        takeUntil(destroy$),
+        filter(() => !this.fetchingStrictly)
+      )
+      .subscribe(ev => this.processEv(ev));
     this.srv.options$.pipe(takeUntil(destroy$)).subscribe(() => this.setClass());
     this.settings.notify.pipe(takeUntil(destroy$)).subscribe(() => this.setClass());
   }