Angular 4跨组件触发平滑滚动至指定区域（不修改URL）

我来帮你搞定这个需求！要实现点击菜单后详情组件平滑滚动到对应区域且不修改URL，我们可以通过组件间通信+原生滚动API来实现，具体步骤如下：

步骤1：创建共享滚动服务 #

因为菜单组件和详情组件是独立的，我们需要一个共享服务来传递滚动目标信息：

// scroll.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ScrollService {
  private scrollTargetSource = new Subject<string>();
  scrollTarget$ = this.scrollTargetSource.asObservable();

  triggerScroll(targetId: string) {
    this.scrollTargetSource.next(targetId);
  }
}

步骤2：改造菜单组件 #

给父菜单和子菜单的点击事件绑定触发滚动的方法，传递对应的唯一标识（这里用cat_name生成合法ID，处理空格和特殊字符）：

<!-- 菜单组件模板 -->
<div class="rsnt-cat-menu">
  <ul>
    <li><a href="javascript:void(0)" (click)="scrollToTarget('popular')">Popular</a></li>
    <li class="active-cat" *ngFor="let menu of menuArray">
      <a href="javascript:void(0)" (click)="scrollToTarget(getTargetId(menu.cat_name))">
        {{ menu.cat_name }}
      </a>
      <ul>
        <li *ngFor="let submenu of menu.sub_category_list">
          <a href="javascript:void(0)" (click)="scrollToTarget(getTargetId(submenu.cat_name))">
            {{ submenu.cat_name }}
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>

// 菜单组件类
import { Component } from '@angular/core';
import { ScrollService } from './scroll.service';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html'
})
export class MenuComponent {
  menuArray = []; // 你的菜单数据

  constructor(private scrollService: ScrollService) {}

  // 生成合法的HTML目标ID
  getTargetId(name: string): string {
    return name.toLowerCase().replace(/\s+/g, '-');
  }

  // 通知详情组件执行滚动
  scrollToTarget(targetId: string) {
    this.scrollService.triggerScroll(targetId);
  }
}

步骤3：改造详情组件 #

给每个需要滚动到的标题元素添加对应ID，然后监听滚动服务的通知，执行平滑滚动：

<!-- 详情组件模板 -->
<div *ngFor="let singleElement of foodArray" class="rsnt-menu-block">
  <!-- 父菜单对应标题，绑定ID -->
  <h2 class="main-subheading" [id]="getTargetId(singleElement.cat_name)">
    {{ singleElement.cat_name }}
  </h2>
  <div *ngFor="let subchildElement of singleElement.sub_category_list">
    <div>
      <!-- 子菜单对应标题，绑定ID -->
      <h3 class="main-subheading-type2" [id]="getTargetId(subchildElement.cat_name)">
        {{ subchildElement.cat_name }} {{ subchildElement.sub_category_item.length }} Items
      </h3>
      <!-- 菜品列表保持原有代码不变 -->
      <div>
        <ul *ngFor="let sibling of subchildElement.sub_category_item" class="menu-row-list">
          <!-- ... 原有菜品代码 ... -->
        </ul>
      </div>
    </div>
  </div>
  <!-- 无子分类的情况，给标题元素绑定ID -->
  <div *ngIf="singleElement.sub_category_list.length==0">
    <span [id]="getTargetId(singleElement.cat_name)">
      {{ singleElement.category_item.length }} Items
    </span>
    <!-- ... 原有菜品代码 ... -->
  </div>
</div>

// 详情组件类
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ScrollService } from './scroll.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html'
})
export class DetailsComponent implements OnInit, OnDestroy {
  foodArray = []; // 你的菜品数据
  private scrollSubscription: Subscription;

  constructor(private scrollService: ScrollService) {}

  ngOnInit() {
    // 监听滚动通知，执行平滑滚动
    this.scrollSubscription = this.scrollService.scrollTarget$.subscribe(targetId => {
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        // 平滑滚动到目标元素，完全不修改URL
        targetElement.scrollIntoView({
          behavior: 'smooth',
          block: 'start' // 可选：滚动到元素顶部位置
        });
      }
    });
  }

  ngOnDestroy() {
    // 销毁订阅避免内存泄漏
    if (this.scrollSubscription) {
      this.scrollSubscription.unsubscribe();
    }
  }

  // 和菜单组件一致的ID生成逻辑
  getTargetId(name: string): string {
    return name.toLowerCase().replace(/\s+/g, '-');
  }
}

关键说明 #

1. 组件通信：通过ScrollService的Subject传递滚动目标，摆脱父子组件绑定限制，适合任意组件间的通信场景。
2. 平滑滚动：使用原生DOM API scrollIntoView({behavior: 'smooth'})实现平滑效果，无需第三方库，且绝对不会修改URL。
3. 合法ID处理：统一的getTargetId方法确保菜单名称转成合法的HTML ID，保证能精准定位到目标元素。
4. 内存防护：在组件销毁时取消订阅，避免内存泄漏问题。

这样点击菜单（父菜单或子菜单）后，详情组件就会平滑滚动到对应的区域，完全符合你的需求！

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