将jQuery侧边栏切换动画转换为Angular的实现方法问询

Great question! When moving from jQuery to Angular, we want to avoid direct DOM manipulation as much as possible and leverage Angular's template binding and component logic instead. Let's break down how to replicate your jQuery functionality step by step:

1. Replace toggleClass with Angular's [ngClass] #

Instead of relying on Renderer2 (which doesn't have a built-in toggleClass method), we'll use boolean flags in our component to control class application directly in the template. This is more idiomatic Angular and easier to maintain long-term.

First, define boolean properties in your component to track the sidebar and submenu states:

isNavExpanded = false;
isSubmenuExpanded = false;

Then update your template to bind classes using [ngClass] (or [class.*] for simpler cases):

<!-- Toggle Button -->
<button (click)="toggleSidebar()" class="sa-fixedNav_toggle">
  <!-- Your toggle icon here -->
</button>

<!-- Sidebar Container -->
<div #sidebar class="sa-fixedNav_positon" [ngClass]="{'sa-fixedNav_size-grow': isNavExpanded}">
  <!-- Expandable Sidebar Content -->
  <div class="sa-fixedNav_content-expand" [class.hidden]="!isNavExpanded"></div>
  
  <!-- Nav Link with Submenu Toggle -->
  <div class="sa-fixedNav_nav-links" (click)="toggleSubmenu()">
    <i 
      class="sa-fixedNav_option-expand-icon" 
      [class.hidden]="!isNavExpanded" 
      [class.sa-fixedNav_expand-hidden]="isSubmenuExpanded"
    ></i>
    <i 
      class="sa-fixedNav_option-expandDown-icon" 
      [class.hidden]="!isNavExpanded" 
      [class.sa-fixedNav_expand-hidden]="!isSubmenuExpanded"
    ></i>
  </div>
</div>

<!-- Main Content Area -->
<div class="pa-content_layout" [ngClass]="{'pa-content_push-right': isNavExpanded}">
  <!-- Your main page content here -->
</div>

2. Get Element Width with @ViewChild and ElementRef #

To access the sidebar's width (like jQuery's .width()), use @ViewChild to reference the sidebar element, then access its native DOM properties:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  // Your component metadata (selector, templateUrl, etc.)
})
export class SidebarComponent {
  isNavExpanded = false;
  isSubmenuExpanded = false;
  @ViewChild('sidebar') sidebar!: ElementRef<HTMLElement>;

  // ... rest of the component logic
}

3. Implement the Toggle Logic #

Now replicate your original jQuery click handler and content show/hide logic in Angular:

toggleSidebar() {
  this.isNavExpanded = !this.isNavExpanded;

  // Get the rendered width of the sidebar
  const sidebarWidth = this.sidebar.nativeElement.offsetWidth;

  if (sidebarWidth === 78) {
    this.sideNavContentShow();
  } else {
    setTimeout(() => {
      this.sideNavContentHide();
    }, 150);
  }
}

sideNavContentShow() {
  // No need to manually add/remove classes here - [ngClass] handles visibility via isNavExpanded
  // Add any additional show-time logic here if needed
}

sideNavContentHide() {
  // Similarly, [ngClass] manages the hidden state
  // Add any cleanup or hide-time logic here if needed
}

toggleSubmenu() {
  this.isSubmenuExpanded = !this.isSubmenuExpanded;
}

Key Notes: #

• We're using Angular's template binding to handle class toggling instead of direct DOM manipulation, which aligns with Angular's best practices and makes the code more predictable.
• offsetWidth gives us the rendered width of the sidebar element, matching the behavior of jQuery's .width().
• The 150ms setTimeout is preserved to match your original animation timing.

This implementation will behave exactly like your jQuery code but in a way that's maintainable and fits Angular's component-based architecture.

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