Angular中通过服务实现点击按钮跳转页面并滚动到指定组件

先修正现有代码的语法错误 #

1. 按钮组件HTML的事件绑定需遵循Angular语法，将click改为(click)：

<div class="col-xs-12">
  <customized-button
   label="MAGIC BUTTON"
   (click)="goToMagicComponent()"
  >
  </customized-button>
</div>

2. 按钮组件TS的constructor末尾需用大括号（而非分号），同时确保服务方法名与调用处统一：

imports...
@Component({
  selector: 'magic-button',
  templateUrl: './magic-button.component.html',
  styleUrls: ['./magic-button.component.scss'],
})
export class MagicButtonComponent {
 constructor(
    private magicButtonService: MagicButtonService
  ) {} // 修正为大括号
 
 goToMagicComponent(): void {
  this.magicButtonService.goToMagicComponent(); // 确保服务中存在该方法
 }
}

方案一：路由参数+目标页面滚动处理（推荐） #

通过路由导航携带滚动目标标识，目标页面监听路由参数后执行滚动，逻辑清晰且符合Angular路由规范。

1. 完善魔法按钮服务（MagicButtonService）

导入Router，导航到目标页面并携带滚动目标的query参数：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class MagicButtonService {
  constructor(private router: Router) {}

  goToMagicComponent(): void {
    // 替换为你的目标页面实际路由路径，携带滚动目标标识
    this.router.navigate(['/magic-page'], {
      queryParams: { scrollTo: 'magic-target-component' }
    });
  }
}

2. 目标页面（MagicPageComponent）处理滚动

给需要滚动到的组件添加元素引用（或id），在页面初始化后监听路由参数触发滚动：

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

@Component({
  selector: 'magic-page',
  templateUrl: './magic-page.component.html',
  styleUrls: ['./magic-page.component.scss']
})
export class MagicPageComponent implements AfterViewInit {
  // 方式1：通过ViewChild获取目标组件的DOM引用
  @ViewChild('magicTarget') magicTargetEl!: ElementRef;

  constructor(private route: ActivatedRoute) {}

  ngAfterViewInit(): void {
    // 监听路由query参数变化
    this.route.queryParams.subscribe(params => {
      if (params['scrollTo'] === 'magic-target-component') {
        this.scrollToTarget();
      }
    });
  }

  private scrollToTarget(): void {
    // 执行平滑滚动到目标元素
    this.magicTargetEl.nativeElement.scrollIntoView({
      behavior: 'smooth', // 可选：移除则为瞬间跳转
      block: 'start' // 滚动到元素顶部
    });

    // 方式2：若用id标识目标组件，可直接通过DOM获取
    // const targetEl = document.getElementById('magic-target-component');
    // if (targetEl) targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

目标页面HTML示例

给目标组件添加#magicTarget引用（或id）：

<div class="magic-page-container">
  <!-- 页面内其他组件 -->
  <magic-target-component #magicTarget></magic-target-component>
  <!-- 或用id：<magic-target-component id="magic-target-component"></magic-target-component> -->
</div>

方案二：RxJS Subject跨组件通信 #

通过服务中的Subject传递滚动信号，适合需要灵活控制滚动时机的场景（比如导航完成后延迟滚动）。

1. 改造魔法按钮服务

添加Subject用于发送滚动触发信号：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MagicButtonService {
  private scrollTrigger$ = new Subject<string>();

  constructor(private router: Router) {}

  goToMagicComponent(): void {
    // 先完成页面导航，再发送滚动信号
    this.router.navigate(['/magic-page']).then(() => {
      this.scrollTrigger$.next('magic-target-component');
    });
  }

  // 提供订阅接口给目标页面
  getScrollTrigger() {
    return this.scrollTrigger$.asObservable();
  }
}

2. 目标页面订阅滚动信号

订阅服务中的信号触发滚动，并在组件销毁时取消订阅避免内存泄漏：

import { Component, AfterViewInit, ElementRef, ViewChild, OnDestroy } from '@angular/core';
import { MagicButtonService } from '../services/magic-button.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'magic-page',
  templateUrl: './magic-page.component.html',
  styleUrls: ['./magic-page.component.scss']
})
export class MagicPageComponent implements AfterViewInit, OnDestroy {
  @ViewChild('magicTarget') magicTargetEl!: ElementRef;
  private scrollSubscription!: Subscription;

  constructor(private magicBtnService: MagicButtonService) {}

  ngAfterViewInit(): void {
    // 订阅滚动触发信号
    this.scrollSubscription = this.magicBtnService.getScrollTrigger().subscribe(targetId => {
      if (targetId === 'magic-target-component') {
        this.magicTargetEl.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  }

  ngOnDestroy(): void {
    // 取消订阅防止内存泄漏
    this.scrollSubscription.unsubscribe();
  }
}

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