Angular2：如何实现侧边栏默认状态差异化？是否需新增指令？

现有如下Angular指令，用于切换侧边栏的展开/收起状态，当前侧边栏默认处于展开状态：

@Directive({ selector: '[appSidebarMinimizer]' }) 
export class SidebarMinimizeDirective { 
  constructor() { } 
  @HostListener('click', ['$event']) toggleOpen($event: any) { 
    $event.preventDefault(); 
    document.querySelector('body').classList.toggle('sidebar-minimized'); 
  } 
}

现需在部分页面中让侧边栏默认处于收起状态，请问是否必须创建另一个逻辑几乎完全相同的指令来实现？

当然不用重复创建指令啦！完全可以通过扩展现有指令的功能来实现，既减少冗余代码，又保持逻辑统一。这里给你几个实用的方案：

方案1：通过输入属性控制初始状态 #

给指令添加一个@Input()属性，用来指定页面加载时侧边栏的初始状态。这样在不同页面使用指令时，就能灵活设置默认状态了。

修改后的指令代码：

import { Directive, HostListener, Input, OnInit } from '@angular/core';

@Directive({ selector: '[appSidebarMinimizer]' }) 
export class SidebarMinimizeDirective implements OnInit {
  // 输入属性，默认值为false（即默认展开）
  @Input() initialMinimized = false;

  constructor() { }

  ngOnInit(): void {
    // 初始化时根据输入值设置侧边栏状态
    const body = document.querySelector('body');
    if (this.initialMinimized) {
      body?.classList.add('sidebar-minimized');
    } else {
      body?.classList.remove('sidebar-minimized');
    }
  }

  @HostListener('click', ['$event']) toggleOpen($event: any) { 
    $event.preventDefault(); 
    document.querySelector('body')?.classList.toggle('sidebar-minimized'); 
  } 
}

使用方式：

• 默认展开的页面（保持原有用法）：

  <button appSidebarMinimizer>切换侧边栏</button>
  

• 需要默认收起的页面：

  <button appSidebarMinimizer [initialMinimized]="true">切换侧边栏</button>
  

方案2：通过服务共享状态 #

如果侧边栏状态需要在多个组件间共享，或者需要更复杂的状态管理，可以创建一个专门的侧边栏服务，指令依赖这个服务来获取初始状态和切换状态。

示例服务：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SidebarService {
  private isMinimized = false;

  setInitialMinimized(state: boolean): void {
    this.isMinimized = state;
    const body = document.querySelector('body');
    if (state) {
      body?.classList.add('sidebar-minimized');
    } else {
      body?.classList.remove('sidebar-minimized');
    }
  }

  toggleMinimized(): void {
    this.isMinimized = !this.isMinimized;
    document.querySelector('body')?.classList.toggle('sidebar-minimized');
  }
}

修改后的指令：

import { Directive, HostListener, OnInit } from '@angular/core';
import { SidebarService } from './sidebar.service';

@Directive({ selector: '[appSidebarMinimizer]' }) 
export class SidebarMinimizeDirective implements OnInit {
  constructor(private sidebarService: SidebarService) { }

  ngOnInit(): void {
    // 这里也可以根据路由等逻辑调用服务的setInitialMinimized方法
    // 比如在特定路由组件的ngOnInit中调用sidebarService.setInitialMinimized(true)
  }

  @HostListener('click', ['$event']) toggleOpen($event: any) { 
    $event.preventDefault(); 
    this.sidebarService.toggleMinimized();
  } 
}

然后在需要默认收起的页面组件中：

import { OnInit } from '@angular/core';
import { SidebarService } from './sidebar.service';

export class SomeComponent implements OnInit {
  constructor(private sidebarService: SidebarService) {}

  ngOnInit(): void {
    this.sidebarService.setInitialMinimized(true);
  }
}

方案3：基于路由自动判断 #

如果默认状态和路由强关联，可以在指令中注入ActivatedRoute，根据当前路由来自动设置初始状态。

示例：

import { Directive, HostListener, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Directive({ selector: '[appSidebarMinimizer]' }) 
export class SidebarMinimizeDirective implements OnInit {
  // 定义需要默认收起的路由路径
  private minimizedRoutes = ['/dashboard', '/settings'];

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    const currentPath = this.route.snapshot.routeConfig?.path;
    const body = document.querySelector('body');
    if (currentPath && this.minimizedRoutes.includes(currentPath)) {
      body?.classList.add('sidebar-minimized');
    } else {
      body?.classList.remove('sidebar-minimized');
    }
  }

  @HostListener('click', ['$event']) toggleOpen($event: any) { 
    $event.preventDefault(); 
    document.querySelector('body')?.classList.toggle('sidebar-minimized'); 
  } 
}

这几种方案都能避免重复创建指令，优先推荐方案1，因为它最简洁灵活，直接通过输入属性就能满足需求。

内容的提问来源于stack exchange，提问作者Snorlax