Angular 2及以上版本带动画侧边栏菜单实现技术求助

Hey there! I totally get avoiding PrimeNG for custom components—let's build this slide-in sidebar using Angular's native animations and component features instead. Here's a complete, clean implementation tailored to your needs:

First, we'll define the animation trigger directly in your @Component decorator, using the Angular animations module you already imported. This handles the smooth slide-in/out transition:

import { Component, HostListener, ElementRef } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css'],
  animations: [
    trigger('sidebarState', [
      state('closed', style({
        left: '-300px' // Match your sidebar width here
      })),
      state('open', style({
        left: '0'
      })),
      transition('closed <=> open', animate('0.3s ease-in-out'))
    ])
  ]
})
export class SidebarComponent {
  sidebarState = 'closed';
  private isClickInside = false;

  constructor(private elRef: ElementRef) {}

  toggleSidebar() {
    this.sidebarState = this.sidebarState === 'open' ? 'closed' : 'open';
    this.isClickInside = true; // Prevent immediate close after opening
  }

  closeSidebar() {
    this.sidebarState = 'closed';
  }

  // Track clicks inside the sidebar or trigger button
  @HostListener('click')
  clickInside() {
    this.isClickInside = true;
  }

  // Handle clicks outside the sidebar to close it
  @HostListener('document:click', ['$event'])
  clickOutside(event: Event) {
    if (!this.isClickInside && this.sidebarState === 'open') {
      this.closeSidebar();
    }
    this.isClickInside = false; // Reset for next click
  }
}

Your template will include the trigger button, the animated sidebar container, and internal links that trigger the close action:

<!-- Trigger Button -->
<button (click)="toggleSidebar()">Open Sidebar</button>

<!-- Sidebar Container -->
<div 
  class="sidebar"
  [@sidebarState]="sidebarState"
>
  <nav>
    <!-- Internal links that close the sidebar on click -->
    <a href="/home" (click)="closeSidebar()">Home</a>
    <a href="/profile" (click)="closeSidebar()">Profile</a>
    <a href="/settings" (click)="closeSidebar()">Settings</a>
  </nav>
</div>

Add these styles to make the sidebar fixed and visually distinct:

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 300px;
  background-color: #f5f5f5;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.2);
  z-index: 1000;
}

.sidebar a {
  display: block;
  margin: 15px 0;
  text-decoration: none;
  color: #333;
}

Key Details Explained: #

• Animations: The sidebarState trigger transitions between closed (off-screen left) and open (visible at left:0) with a smooth 0.3-second ease-in-out animation.
• Outside Click Handling: We use @HostListener to track clicks inside the component (sidebar/button) vs. outside. If the click is outside and the sidebar is open, we close it.
• Internal Link Closure: Each link in the sidebar calls closeSidebar() on click, ensuring the menu hides when navigating.

This implementation is lightweight, uses only Angular's core features, and fully meets your requirements without relying on third-party libraries.

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