feat(theme:default): add LayoutDefaultService service (#1561)

Author: cipchk

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

@@ -88,7 +88,7 @@ export class LayoutBasicComponent {
 }
 ```
 
-In addition, in layout operations, you can subscribe to layout changes through `SettingsService.notify` (for example: sidebar show and hide, etc.). Note that all layout-related changes will pass through this interface, so you need to do `filter` operation.
+The layout can be dynamically managed at runtime through the `LayoutDefaultService` service. In addition, in layout operations, you can subscribe to layout changes through `SettingsService.notify` (for example: sidebar show and hide, etc.). Note that all layout-related changes will pass through this interface, so you need to do `filter` operation.
 
 ## API
 
@@ -98,6 +98,7 @@ In addition, in layout operations, you can subscribe to layout changes through `
 |----------|-------------|------|---------|
 | `[options]` | Options of the layout | `LayoutDefaultOptions` | `-` |
 | `[asideUser]` | Side user of the layout | `TemplateRef<void>` | `-` |
+| `[asideBottom]` | Bottom information of the layout | `TemplateRef<void>` | `-` |
 | `[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` |
@@ -112,6 +113,9 @@ In addition, in layout operations, you can subscribe to layout changes through `
 | `[logoFixWidth]` | Specify a fixed logo width | `number` | - |
 | `[logoLink]` | Specify the logo routing address | `string` | `/` |
 | `[hideAside]` | Hide the sidebar without showing the collapsed icon button | `boolean` | `false` |
+| `[hideHeader]` | Hide top bar | `boolean` | `false` |
+| `[showHeaderCollapse]` | Whether to display the menu collapse button on the top bar | `boolean` | `true` |
+| `[showSiderCollapse]` | Whether to show the menu collapse button at the bottom of the sidebar | `boolean` | `false` |
 
 ### layout-default-nav
 
@@ -239,8 +243,4 @@ The menu will be re-rendered via calling `MenuService.setItem(key, newValue)`, p
 
 **How to control menu expand**
 
-Use `SettingsService.setLayout` to operate on `collapsed`, for example:
-
-```ts
-SettingsService.setLayout('collapsed', status);
-````
+Use `LayoutDefaultService.toggleCollapsed()` for manual control at runtime.

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

@@ -88,7 +88,7 @@ export class LayoutBasicComponent {
 }
 ```
 
-除此之外，在布局的操作都可以通过 `SettingsService.notify` 来订阅布局的变化（例如：侧边栏的展开与收缩等），注意所有布局相关的变化都会通过这个接口，所以需要做好 `filter` 操作。
+通过 `LayoutDefaultService` 服务可以在运行时动态管理布局。除此之外，在布局的操作都可以通过 `SettingsService.notify` 来订阅布局的变化（例如：侧边栏的展开与收缩等），注意所有布局相关的变化都会通过这个接口，所以需要做好 `filter` 操作。
 
 ## API
 
@@ -98,6 +98,7 @@ export class LayoutBasicComponent {
 |----|----|----|-----|
 | `[options]` | 选项 | `LayoutDefaultOptions` | `-` |
 | `[asideUser]` | 侧边用户信息 | `TemplateRef<void>` | `-` |
+| `[asideBottom]` | 侧边底部信息 | `TemplateRef<void>` | `-` |
 | `[nav]` | 导航信息 | `TemplateRef<void>` | `-` |
 | `[content]` | 内容信息 | `TemplateRef<void>` | `-` |
 | `[customError]` | 自定义异常路由错误消息，当 `null` 时表示不显示错误消息 | `string, null` | `Could not load ${evt.url} route` |
@@ -112,6 +113,9 @@ export class LayoutBasicComponent {
 | `[logoFixWidth]` | 指定固定 Logo 宽度 | `number` | - |
 | `[logoLink]` | 指定 Logo 路由地址 | `string` | `/` |
 | `[hideAside]` | 隐藏侧边栏，同时不显收缩图标按钮 | `boolean` | `false` |
+| `[hideHeader]` | 隐藏顶栏 | `boolean` | `false` |
+| `[showHeaderCollapse]` | 是否在顶栏显示菜单折叠按钮 | `boolean` | `true` |
+| `[showSiderCollapse]` | 是否在侧边栏底部显示菜单折叠按钮 | `boolean` | `false` |
 
 ### layout-default-nav
 
@@ -239,8 +243,4 @@ export class LayoutBasicComponent {
 
 **如何控制菜单展开**
 
-利用 `SettingsService.setLayout` 对 `collapsed` 进行操作，例如：
-
-```ts
-SettingsService.setLayout('collapsed', status);
-```
+利用 `LayoutDefaultService.toggleCollapsed()` 来运行时手动控制。

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

@@ -14,6 +14,7 @@ import { App, SettingsService } from '@delon/theme';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { LayoutDefaultHeaderItemComponent } from './layout-header-item.component';
+import { LayoutDefaultService } from './layout.service';
 import { LayoutDefaultHeaderItemDirection, LayoutDefaultHeaderItemHidden, LayoutDefaultOptions } from './types';
 
 interface LayoutDefaultHeaderItem {
@@ -30,19 +31,19 @@ interface LayoutDefaultHeaderItem {
         <ng-container *ngTemplateOutlet="i.host"></ng-container>
       </li>
     </ng-template>
-    <div class="alain-default__header-logo" [style.width.px]="options.logoFixWidth">
-      <ng-container *ngIf="!options.logo; else options.logo!">
-        <a [routerLink]="options.logoLink" class="alain-default__header-logo-link">
-          <img class="alain-default__header-logo-expanded" [attr.src]="options.logoExpanded" [attr.alt]="app.name" />
-          <img class="alain-default__header-logo-collapsed" [attr.src]="options.logoCollapsed" [attr.alt]="app.name" />
+    <div class="alain-default__header-logo" [style.width.px]="opt.logoFixWidth">
+      <ng-container *ngIf="!opt.logo; else opt.logo!">
+        <a [routerLink]="opt.logoLink" class="alain-default__header-logo-link">
+          <img class="alain-default__header-logo-expanded" [attr.src]="opt.logoExpanded" [attr.alt]="app.name" />
+          <img class="alain-default__header-logo-collapsed" [attr.src]="opt.logoCollapsed" [attr.alt]="app.name" />
         </a>
       </ng-container>
     </div>
     <div class="alain-default__nav-wrap">
       <ul class="alain-default__nav">
-        <li *ngIf="!options.hideAside">
+        <li *ngIf="!opt.hideAside && opt.showHeaderCollapse">
           <div class="alain-default__nav-item alain-default__nav-item--collapse" (click)="toggleCollapsed()">
-            <i nz-icon [nzType]="collapsedIcon"></i>
+            <span nz-icon [nzType]="collapsedIcon"></span>
           </div>
         </li>
         <ng-template [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: left }"></ng-template>
@@ -64,12 +65,15 @@ export class LayoutDefaultHeaderComponent implements AfterViewInit, OnDestroy {
   private destroy$ = new Subject<void>();
 
   @Input() items!: QueryList<LayoutDefaultHeaderItemComponent>;
-  @Input() options!: LayoutDefaultOptions;
 
   left: LayoutDefaultHeaderItem[] = [];
   middle: LayoutDefaultHeaderItem[] = [];
   right: LayoutDefaultHeaderItem[] = [];
 
+  get opt(): LayoutDefaultOptions {
+    return this.srv.options;
+  }
+
   get app(): App {
     return this.settings.app;
   }
@@ -79,14 +83,10 @@ export class LayoutDefaultHeaderComponent implements AfterViewInit, OnDestroy {
   }
 
   get collapsedIcon(): string {
-    let type = this.collapsed ? 'unfold' : 'fold';
-    if (this.settings.layout.direction === 'rtl') {
-      type = this.collapsed ? 'fold' : 'unfold';
-    }
-    return `menu-${type}`;
+    return this.srv.collapsedIcon;
   }
 
-  constructor(private settings: SettingsService, private cdr: ChangeDetectorRef) {}
+  constructor(private srv: LayoutDefaultService, private settings: SettingsService, private cdr: ChangeDetectorRef) {}
 
   private refresh(): void {
     const arr = this.items.toArray();
@@ -98,11 +98,12 @@ export class LayoutDefaultHeaderComponent implements AfterViewInit, OnDestroy {
 
   ngAfterViewInit(): void {
     this.items.changes.pipe(takeUntil(this.destroy$)).subscribe(() => this.refresh());
+    this.srv.options$.pipe(takeUntil(this.destroy$)).subscribe(() => this.cdr.detectChanges());
     this.refresh();
   }
 
   toggleCollapsed(): void {
-    this.settings.setLayout('collapsed', !this.settings.layout.collapsed);
+    this.srv.toggleCollapsed();
   }
 
   ngOnDestroy(): void {

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

@@ -37,7 +37,8 @@ const FLOATINGCLS = 'sidebar-nav__floating';
   templateUrl: './layout-nav.component.html',
   host: {
     '(click)': '_click()',
-    '(document:click)': 'closeSubMenu()'
+    '(document:click)': 'closeSubMenu()',
+    '[class.d-block]': `true`
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -12,6 +12,7 @@ import { SettingsService } from '../src/services/settings/settings.service';
 import { AlainThemeModule } from '../src/theme.module';
 import { LayoutDefaultComponent } from './layout.component';
 import { LayoutDefaultModule } from './layout.module';
+import { LayoutDefaultService } from './layout.service';
 import { LayoutDefaultOptions } from './types';
 
 describe('theme: layout-default', () => {
@@ -50,16 +51,14 @@ describe('theme: layout-default', () => {
   });
 
   it('should be toggle collapsed', () => {
-    const srv = TestBed.inject(SettingsService);
-    let collapsed = false;
-    spyOnProperty(srv, 'layout').and.returnValue({ collapsed });
+    const srv = TestBed.inject(LayoutDefaultService);
+    srv.toggleCollapsed(true);
     fixture.detectChanges();
     const el = page.getEl('.alain-default__nav-item--collapse');
-    expect(el.querySelector('.anticon-menu-fold') != null).toBe(true);
-    collapsed = true;
-    el.click();
-    fixture.detectChanges();
     expect(el.querySelector('.anticon-menu-unfold') != null).toBe(true);
+    srv.toggleCollapsed(false);
+    fixture.detectChanges();
+    expect(el.querySelector('.anticon-menu-fold') != null).toBe(true);
   });
 
   it('#colorWeak', () => {

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

@@ -6,7 +6,6 @@ import {
   Inject,
   Input,
   OnDestroy,
-  OnInit,
   QueryList,
   Renderer2,
   TemplateRef
@@ -28,19 +27,29 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 import { LayoutDefaultHeaderItemComponent } from './layout-header-item.component';
+import { LayoutDefaultService } from './layout.service';
 import { LayoutDefaultOptions } from './types';
 
 @Component({
   selector: 'layout-default',
   exportAs: 'layoutDefault',
   template: `
     <div class="alain-default__progress-bar" *ngIf="isFetching"></div>
-    <layout-default-header [options]="options" [items]="headerItems"></layout-default-header>
-    <div *ngIf="!options.hideAside" class="alain-default__aside">
-      <div class="alain-default__aside-inner">
-        <ng-container *ngTemplateOutlet="asideUser"></ng-container>
-        <ng-container *ngTemplateOutlet="nav"></ng-container>
-        <layout-default-nav *ngIf="!nav" class="d-block py-lg"></layout-default-nav>
+    <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">
+        <div class="alain-default__aside-inner">
+          <ng-container *ngTemplateOutlet="asideUser"></ng-container>
+          <ng-container *ngTemplateOutlet="nav"></ng-container>
+          <layout-default-nav *ngIf="!nav"></layout-default-nav>
+        </div>
+        <div *ngIf="opt.showSiderCollapse" class="alain-default__aside-link">
+          <ng-container *ngIf="asideBottom === null; else asideBottom">
+            <div class="alain-default__aside-link-collapsed" (click)="toggleCollapsed()">
+              <span nz-icon [nzType]="collapsedIcon"></span>
+            </div>
+          </ng-container>
+        </div>
       </div>
     </div>
     <section class="alain-default__content">
@@ -49,28 +58,52 @@ import { LayoutDefaultOptions } from './types';
     </section>
   `
 })
-export class LayoutDefaultComponent implements OnInit, OnDestroy {
+export class LayoutDefaultComponent implements OnDestroy {
   @ContentChildren(LayoutDefaultHeaderItemComponent, { descendants: false })
   headerItems!: QueryList<LayoutDefaultHeaderItemComponent>;
 
-  @Input() options!: LayoutDefaultOptions;
+  get opt(): LayoutDefaultOptions {
+    return this.srv.options;
+  }
+
+  @Input()
+  set options(value: LayoutDefaultOptions | null | undefined) {
+    this.srv.setOptions(value);
+  }
   @Input() asideUser: TemplateRef<void> | null = null;
+  @Input() asideBottom: TemplateRef<NzSafeAny> | null = null;
   @Input() nav: TemplateRef<void> | null = null;
   @Input() content: TemplateRef<void> | null = null;
   @Input() customError?: string | null;
 
   private destroy$ = new Subject<void>();
   isFetching = false;
 
+  get collapsed(): boolean {
+    return this.settings.layout.collapsed;
+  }
+
+  get collapsedIcon(): string {
+    return this.srv.collapsedIcon;
+  }
+
+  toggleCollapsed(): void {
+    this.srv.toggleCollapsed();
+  }
+
   constructor(
     router: Router,
     private msgSrv: NzMessageService,
     private settings: SettingsService,
     private el: ElementRef,
     private renderer: Renderer2,
-    @Inject(DOCUMENT) private doc: NzSafeAny
+    @Inject(DOCUMENT) private doc: NzSafeAny,
+    private srv: LayoutDefaultService
   ) {
     router.events.pipe(takeUntil(this.destroy$)).subscribe(ev => this.processEv(ev));
+    const { destroy$ } = this;
+    this.srv.options$.pipe(takeUntil(destroy$)).subscribe(() => this.setClass());
+    this.settings.notify.pipe(takeUntil(destroy$)).subscribe(() => this.setClass());
   }
 
   processEv(ev: Event): void {
@@ -102,25 +135,13 @@ export class LayoutDefaultComponent implements OnInit, OnDestroy {
       ['alain-default']: true,
       [`alain-default__fixed`]: layout.fixed,
       [`alain-default__collapsed`]: layout.collapsed,
-      [`alain-default__hide-aside`]: this.options!.hideAside
+      [`alain-default__hide-aside`]: this.opt.hideAside,
+      [`alain-default__hide-header`]: this.opt.hideHeader
     });
 
     doc.body.classList[layout.colorWeak ? 'add' : 'remove']('color-weak');
   }
 
-  ngOnInit(): void {
-    this.options = {
-      logoExpanded: `./assets/logo-full.svg`,
-      logoCollapsed: `./assets/logo.svg`,
-      logoLink: `/`,
-      hideAside: false,
-      ...this.options
-    };
-    const { settings, destroy$ } = this;
-    settings.notify.pipe(takeUntil(destroy$)).subscribe(() => this.setClass());
-    this.setClass();
-  }
-
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();

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

@@ -0,0 +1,40 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AlainThemeModule, Layout, SettingsService } from '@delon/theme';
+
+import { LayoutDefaultService } from './layout.service';
+
+describe('theme: #LayoutDefaultService', () => {
+  let srv: LayoutDefaultService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AlainThemeModule]
+    });
+    srv = TestBed.inject(LayoutDefaultService);
+  });
+
+  it('should be working', () => {
+    srv.setOptions({ hideAside: true });
+    expect(srv.options.hideAside).toBe(true);
+  });
+
+  it('#toggleCollapsed', () => {
+    const settings = TestBed.inject(SettingsService);
+    (settings.layout as Layout).direction = 'ltr';
+    srv.toggleCollapsed(true);
+    expect(srv.collapsedIcon).toBe('menu-unfold');
+    srv.toggleCollapsed(false);
+    expect(srv.collapsedIcon).toBe('menu-fold');
+    srv.toggleCollapsed();
+    expect(srv.collapsedIcon).toBe('menu-unfold');
+    srv.toggleCollapsed();
+    expect(srv.collapsedIcon).toBe('menu-fold');
+    // when is direction
+    (settings.layout as Layout).direction = 'rtl';
+    srv.toggleCollapsed(true);
+    expect(srv.collapsedIcon).toBe('menu-fold');
+    srv.toggleCollapsed(false);
+    expect(srv.collapsedIcon).toBe('menu-unfold');
+  });
+});

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

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { SettingsService } from '@delon/theme';
+
+import { LayoutDefaultOptions } from './types';
+
+const DEFAULT: LayoutDefaultOptions = {
+  logoExpanded: `./assets/logo-full.svg`,
+  logoCollapsed: `./assets/logo.svg`,
+  logoLink: `/`,
+  showHeaderCollapse: true,
+  showSiderCollapse: false,
+  hideAside: false,
+  hideHeader: false
+};
+
+@Injectable({ providedIn: 'root' })
+export class LayoutDefaultService {
+  private _options$ = new BehaviorSubject<LayoutDefaultOptions>(DEFAULT);
+  private _options: LayoutDefaultOptions = DEFAULT;
+
+  get options(): LayoutDefaultOptions {
+    return this._options;
+  }
+
+  get options$(): Observable<LayoutDefaultOptions> {
+    return this._options$.asObservable();
+  }
+
+  get collapsedIcon(): string {
+    const collapsed = this.settings.layout.collapsed;
+    let type = collapsed ? 'unfold' : 'fold';
+    if (this.settings.layout.direction === 'rtl') {
+      type = collapsed ? 'fold' : 'unfold';
+    }
+    return `menu-${type}`;
+  }
+
+  constructor(private settings: SettingsService) {}
+
+  private notify(): void {
+    this._options$.next(this._options);
+  }
+
+  /**
+   * Set layout configuration
+   *
+   * 设置布局配置
+   */
+  setOptions(options?: LayoutDefaultOptions | null): void {
+    this._options = {
+      ...DEFAULT,
+      ...options
+    };
+    this.notify();
+  }
+
+  /**
+   * Toggle the collapsed state of the sidebar menu bar
+   *
+   * 切换侧边栏菜单栏折叠状态
+   */
+  toggleCollapsed(status?: boolean): void {
+    this.settings.setLayout('collapsed', status != null ? status : !this.settings.layout.collapsed);
+    this.notify();
+  }
+}

packages/theme/layout-default/public_api.ts

@@ -5,3 +5,4 @@ export * from './layout-header-item.component';
 export * from './layout-header-item-trigger.directive';
 export * from './layout-nav.component';
 export * from './types';
+export * from './layout.service';

packages/theme/layout-default/style/_aside.less

@@ -20,8 +20,14 @@
     content: '';
   }
 
-  &-inner {
+  &-wrap {
+    display: flex;
+    flex-direction: column;
     height: 100%;
+  }
+
+  &-inner {
+    flex: 1 1 0%;
     overflow-x: hidden;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
@@ -43,6 +49,17 @@
       background-color: @alain-default-aside-scrollbar-thumb-color;
     }
   }
+
+  &-link {
+    border-top: 1px solid @alain-default-content-heading-border;
+
+    &-collapsed {
+      padding: 8px 0;
+      font-size: 16px;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
 }
 
 // Desktop

packages/theme/layout-default/style/_fixed.less

@@ -9,7 +9,11 @@
     &__aside {
       position: fixed;
     }
+  }
+}
 
+@{alain-default-prefix}__fixed:not(@{alain-default-prefix}__hide-header) {
+  @{alain-default-prefix} {
     &__content {
       margin-top: @alain-default-header-hg;
     }

packages/theme/layout-default/style/_layout.less

@@ -75,6 +75,12 @@ body {
       transform: none !important;
     }
   }
+
+  &__hide-header {
+    @{alain-default-prefix}__aside {
+      margin-top: 0;
+    }
+  }
 }
 
 // Desktop

packages/theme/layout-default/style/fix/_reuse-tab.less

@@ -27,6 +27,12 @@
   }
 }
 
+@{alain-default-prefix}__hide-header {
+  @{reuse-tab-prefix} {
+    top: 0;
+  }
+}
+
 @media (min-width: @mobile-min) {
   @{alain-default-prefix}__fixed {
     @{reuse-tab-prefix} {

packages/theme/layout-default/style/fix/_sidebar-nav.less

@@ -234,7 +234,7 @@
         &-link {
           display: flex;
           justify-content: center;
-          padding: (@layout-gutter * 3) 0;
+          padding: @alain-default-aside-collapsed-padding;
 
           @{sidebar-nav-prefix}__item-icon {
             margin-right: 0;

packages/theme/layout-default/style/theme-default.less

@@ -36,6 +36,7 @@
 @alain-default-aside-collapsed-wd: @layout-gutter * 8;
 @alain-default-aside-collapsed-nav-fs: 24px;
 @alain-default-aside-collapsed-nav-img-wh: 24px;
+@alain-default-aside-collapsed-padding: (@layout-gutter * 2) 0;
 
 @alain-default-content-heading-bg: #fafbfc;
 @alain-default-content-heading-border: #efe3e5;

packages/theme/layout-default/types.ts

@@ -42,4 +42,25 @@ export interface LayoutDefaultOptions {
    * 隐藏侧边栏，同时不显收缩图标按钮，默认：`false`
    */
   hideAside?: boolean;
+
+  /**
+   * Hide top bar, default: `false`
+   *
+   * 隐藏顶栏，默认：`false`
+   */
+  hideHeader?: boolean;
+
+  /**
+   * Whether to display the menu collapse button on the top bar, default: `true`
+   *
+   * 是否在顶栏显示菜单折叠按钮，默认：`true`
+   */
+  showHeaderCollapse?: boolean;
+
+  /**
+   * Whether to show the menu collapse button at the bottom of the sidebar, default: `false`
+   *
+   * 是否在侧边栏底部显示菜单折叠按钮，默认：`false`
+   */
+  showSiderCollapse?: boolean;
 }

src/dev/dev.module.ts

@@ -20,7 +20,7 @@ const routes: Routes = [
     path: '',
     component: DevLayoutComponent,
     children: [
-      { path: '', component: DevHomeComponent },
+      { path: 'home', component: DevHomeComponent },
       { path: 'l1', component: DevPageComponent },
       { path: 'l2', component: DevPageComponent },
       { path: 'l3', component: DevPageComponent },

src/dev/home/home.component.ts

@@ -1,10 +1,27 @@
 import { Component } from '@angular/core';
 
+import { LayoutDefaultService } from '@delon/theme/layout-default';
+
 @Component({
   selector: 'dev-home',
   template: `
     <page-header [autoBreadcrumb]="false"></page-header>
     home
+    <div class="mb-md"> options: {{ srv.options | json }} </div>
+    <div class="mb-md">
+      <button nz-button (click)="srv.toggleCollapsed()">切换折叠</button>
+      <button nz-button (click)="srv.setOptions({ hideHeader: true })">隐藏顶部</button>
+      <button nz-button (click)="srv.setOptions({ hideAside: true })">隐藏侧边栏</button>
+      <button nz-button (click)="srv.setOptions({ hideHeader: true, hideAside: true })">隐藏顶部与侧边栏</button>
+      <button nz-button (click)="srv.setOptions({ showHeaderCollapse: true })">显示顶部折叠开关</button>
+      <button nz-button (click)="srv.setOptions({ showSiderCollapse: true })">显示侧边栏底部折叠开关</button>
+      <button nz-button (click)="srv.setOptions({ showHeaderCollapse: true, showSiderCollapse: true })"
+        >显示顶部与侧边栏底部折叠开关</button
+      >
+      <button nz-button (click)="srv.setOptions({})">恢复默认</button>
+    </div>
   `
 })
-export class DevHomeComponent {}
+export class DevHomeComponent {
+  constructor(public srv: LayoutDefaultService) {}
+}

src/dev/layout.component.ts

@@ -94,7 +94,11 @@ const ICONS = [
 export class DevLayoutComponent implements OnInit {
   options: LayoutDefaultOptions = {
     logoExpanded: `./assets/logo-full.svg`,
-    logoCollapsed: `./assets/logo.svg`
+    logoCollapsed: `./assets/logo.svg`,
+    hideHeader: false,
+    showHeaderCollapse: false,
+    showSiderCollapse: true
+    // hideAside: true
   };
 
   lang: LangType = 'zh-CN';
@@ -110,18 +114,17 @@ export class DevLayoutComponent implements OnInit {
       children: [
         {
           text: 'Dashboard-DISABLED',
-          link: '/dev',
+          link: '/dev/home',
           icon: 'anticon anticon-dashboard',
           i18n: 'app.header.menu.home',
-          badge: 5,
-          disabled: true
+          badge: 5
         },
-        { text: '测试view1-id', link: '/dev/view/1' },
-        { text: '测试view2-id', link: '/dev/view/2' },
-        { text: 'lazy测试1', link: '/dev/lazy/p1' },
-        { text: 'lazy测试2', link: '/dev/lazy/p2' },
-        { text: 'lazy测试view1-id', link: '/dev/lazy/1/view' },
-        { text: 'lazy测试view2-id', link: '/dev/lazy/2/view' },
+        { text: '测试view1-id', link: '/dev/view/1', icon: 'anticon anticon-appstore' },
+        { text: '测试view2-id', link: '/dev/view/2', icon: 'anticon anticon-appstore' },
+        { text: 'lazy测试1', link: '/dev/lazy/p1', icon: 'anticon anticon-appstore' },
+        { text: 'lazy测试2', link: '/dev/lazy/p2', icon: 'anticon anticon-appstore' },
+        { text: 'lazy测试view1-id', link: '/dev/lazy/1/view', icon: 'anticon anticon-appstore' },
+        { text: 'lazy测试view2-id', link: '/dev/lazy/2/view', icon: 'anticon anticon-appstore' },
         {
           text: 'Level1',
           link: '#',