Angular 17独立应用中如何使用字母滚动条组件？

适配原alphabetical-scroll-bar组件到独立应用 #

这个组件原本基于NgModule，但Angular 17独立应用可直接导入组件使用，步骤如下：

• 安装依赖：

  npm install alphabetical-scroll-bar --save
  

• 在需要使用的独立组件中，直接导入组件并添加到imports数组：

  import { Component } from '@angular/core';
  import { AlphabeticalScrollBarComponent } from 'alphabetical-scroll-bar';
  
  @Component({
    selector: 'app-your-component',
    standalone: true,
    imports: [AlphabeticalScrollBarComponent],
    template: `
      <alphabetical-scroll-bar 
        [items]="contactList" 
        (scrollTo)="handleScrollTo($event)"
      ></alphabetical-scroll-bar>
      <!-- 你的列表容器，根据scrollTo事件滚动到对应项 -->
      <div #listContainer>
        <div *ngFor="let contact of contactList" [id]="'item-' + contact.name.charAt(0).toUpperCase()">
          {{ contact.name }}
        </div>
      </div>
    `
  })
  export class YourComponent {
    contactList = [/* 你的数据项，需包含可用于分组的字段 */];
    
    handleScrollTo(letter: string) {
      const targetElement = document.getElementById(`item-${letter}`);
      targetElement?.scrollIntoView({ behavior: 'smooth' });
    }
  }
  

• 导入组件样式：在angular.json的styles数组中添加路径，或者在组件样式中引入：

  @import '~alphabetical-scroll-bar/lib/alphabetical-scroll-bar.component.css';
  

独立应用友好的替代方案 #

如果原组件适配有问题，推荐两种轻量方案：

1. 自定义字母滚动实现（无第三方依赖） #

完全手写核心逻辑，适合小型项目：

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

@Component({
  selector: 'app-custom-letter-scroll',
  standalone: true,
  template: `
    <div class="letter-sidebar">
      <span *ngFor="let letter of letters" (click)="scrollToLetter(letter)">{{ letter }}</span>
    </div>
    <div #listContainer class="item-list">
      <div *ngFor="let group of groupedItems">
        <h3 class="group-header">{{ group.letter }}</h3>
        <div *ngFor="let item of group.items" class="list-item">{{ item.name }}</div>
      </div>
    </div>
  `,
  styles: [`
    .letter-sidebar { position: fixed; right: 15px; top: 50%; transform: translateY(-50%); }
    .letter-sidebar span { display: block; cursor: pointer; padding: 3px; font-size: 14px; }
    .item-list { max-height: 80vh; overflow-y: auto; padding: 10px; }
    .group-header { margin: 15px 0 5px; }
  `]
})
export class CustomLetterScrollComponent {
  @ViewChild('listContainer') listContainer!: ElementRef;
  letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  items = [/* 你的业务数据 */];
  groupedItems = this.groupItemsByLetter();

  groupItemsByLetter() {
    return this.letters.map(letter => ({
      letter,
      items: this.items.filter(item => item.name.charAt(0).toUpperCase() === letter)
    })).filter(group => group.items.length > 0);
  }

  scrollToLetter(letter: string) {
    const headerElement = this.listContainer.nativeElement.querySelector(`.group-header:contains("${letter}")`);
    headerElement?.scrollIntoView({ behavior: 'smooth' });
  }
}

2. 基于Angular Material的实现（若已用Material） #

结合MatList快速搭建带字母导航的列表：

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

@Component({
  selector: 'app-material-letter-scroll',
  standalone: true,
  imports: [MatListModule],
  template: `
    <div class="letter-sidebar">
      <span *ngFor="let letter of letters" (click)="scrollToLetter(letter)">{{ letter }}</span>
    </div>
    <mat-list #listContainer>
      <mat-list-group *ngFor="let group of groupedItems">
        <mat-list-group-header>{{ group.letter }}</mat-list-group-header>
        <mat-list-item *ngFor="let item of group.items">{{ item.name }}</mat-list-item>
      </mat-list-group>
    </mat-list>
  `,
  styles: [`
    .letter-sidebar { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); }
    .letter-sidebar span { display: block; cursor: pointer; padding: 2px; }
  `]
})
export class MaterialLetterScrollComponent {
  @ViewChild('listContainer') listContainer!: ElementRef;
  letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  items = [/* 你的业务数据 */];
  groupedItems = this.groupItemsByLetter();

  groupItemsByLetter() {
    return this.letters.map(letter => ({
      letter,
      items: this.items.filter(item => item.name.charAt(0).toUpperCase() === letter)
    })).filter(group => group.items.length > 0);
  }

  scrollToLetter(letter: string) {
    const headerElement = this.listContainer.nativeElement.querySelector(`[mat-list-group-header="${letter}"]`);
    headerElement?.scrollIntoView({ behavior: 'smooth' });
  }
}

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