Angular中点击跨组件按钮滚动到目标组件的实现问询

步骤1：给Banner组件的按钮绑定点击事件 #

修改Banner组件的模板，为按钮添加点击触发方法：

<div id='banner' class="col-5 offset-1 d-flex justify-content-center align-items-center">
    <button class="btn mt-5" (click)="scrollToServices()">
        <span class="mx-3">Go</span>
    </button>
</div>

步骤2：编写滚动逻辑 #

在Banner组件的TypeScript文件中，注入DOCUMENT对象实现滚动功能：

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css']
})
export class BannerComponent {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  scrollToServices(): void {
    // 通过ID定位目标组件的DOM元素
    const servicesElement = this.document.getElementById('services');
    if (servicesElement) {
      // 平滑滚动到目标位置，可自定义滚动行为与对齐方式
      servicesElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}

步骤3：修正Services组件的模板语法错误 #

你的Services组件模板存在标签未闭合问题，修正后代码：

<div id="services" class="container-fluid">
</div>

完成以上配置后，点击Banner组件中的「Go」按钮，页面将平滑滚动到Services组件所在位置。

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