如何在Angular组件/TypeScript中集成Logo轮播JavaScript函数

Hey there! Let's get that smooth scrolling carousel working in your Angular component. The core challenge here is dynamically calculating the scrollWidth of your gallery and injecting that into the animation keyframes—we can adapt your original JavaScript approach to fit Angular's lifecycle and best practices without too much hassle.

Step 1: Update Your Component TypeScript File #

First, we'll modify your logo-gallery.component.ts to use Angular's lifecycle hooks and ViewChild to access the gallery element. We'll also add cleanup logic to avoid memory leaks.

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

@Component({
  selector: 'app-logo-gallery',
  templateUrl: './logo-gallery.component.html',
  styleUrls: ['./logo-gallery.component.css']
})
export class LogoGalleryComponent implements AfterViewInit, OnDestroy {
  @Input() logos: string[];
  @ViewChild('logoGallery', { static: false }) logoGallery: ElementRef<HTMLElement>;
  private dynamicStyleElement: HTMLStyleElement | null = null;

  constructor() { }

  ngAfterViewInit(): void {
    // Wait for the view to fully render before calculating scrollWidth
    this.createScrollAnimation();
  }

  ngOnDestroy(): void {
    // Clean up the dynamically created style element when component is destroyed
    if (this.dynamicStyleElement && document.head.contains(this.dynamicStyleElement)) {
      document.head.removeChild(this.dynamicStyleElement);
    }
  }

  private createScrollAnimation(): void {
    const galleryElement = this.logoGallery.nativeElement;
    if (!galleryElement) return;

    // Create dynamic style element for keyframes
    this.dynamicStyleElement = document.createElement('style');
    this.dynamicStyleElement.type = 'text/css';

    // Generate keyframes using the gallery's scrollWidth
    const keyframes = `
      @keyframes scroll-left {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-${galleryElement.scrollWidth}px);
        }
      }
    `;

    this.dynamicStyleElement.innerHTML = keyframes;
    document.head.appendChild(this.dynamicStyleElement);

    // Apply animation to the gallery element
    galleryElement.style.animation = 'scroll-left 20s linear infinite';
  }
}

Key Changes Explained: #

• ngAfterViewInit: We use this lifecycle hook instead of window.onload because it guarantees the component's view has been fully rendered, so we can safely access the gallery element's scrollWidth.
• ViewChild: This gives us a reference to the <ul> element without needing document.getElementById.
• Cleanup in ngOnDestroy: We remove the dynamically created style element when the component is destroyed to prevent leftover styles in the DOM.

Step 2: Update Your Component HTML #

Since you're using an @Input() logos array, replace your hardcoded <li> elements with an *ngFor loop to dynamically render your logos:

<div id="logo-gallery-wrapper">
  <ul id="logo-gallery" #logoGallery>
    <li *ngFor="let logoUrl of logos">
      <figure class="logo-gallery-figure">
        <img [src]="logoUrl" alt="Brand logo">
      </figure>
    </li>
  </ul>
</div>

Step 3: Keep Your CSS as Is #

Your existing CSS works perfectly with Angular's component style encapsulation—no changes needed here! Just paste it into logo-gallery.component.css:

#logo-gallery-wrapper {
 overflow: hidden;
 position: relative;
}
#logo-gallery {
 margin: 0;
 padding: 0;
 position: relative;
 list-style-type: none;
 display: flex;
}
#logo-gallery .logo-gallery-figure {
 margin: 0;
 padding: 0 1.6rem;
 overflow: hidden;
}
#logo-gallery .logo-gallery-figure img {
 height: auto;
 max-height: 50px;
 position: relative;
 filter: grayscale(1);
 transition: all .4s;
}
#logo-gallery .logo-gallery-figure img:hover {
 filter: grayscale(0);
}

Should You Use Angular's Built-in Animations? #

Great question! Angular's @angular/animations module is powerful for most cases, but dynamically calculating scrollWidth for keyframes is tricky there. The approach above is simpler because it directly mirrors your original JavaScript logic while adhering to Angular's best practices. If you did want to use Angular animations, you'd need to work with animation parameters and possibly trigger the animation manually after calculating the width—but for this specific use case, the dynamic style element approach is more straightforward.

Testing It Out #

To use your component, just pass in an array of logo URLs from a parent component:

<app-logo-gallery [logos]="['https://example.com/logo1.svg', 'https://example.com/logo2.svg']"></app-logo-gallery>

内容的提问来源于stack exchange，提问作者Mr. Jo