如何滚动到Angular中的组件？

Question

如何确保当点击<app-navbar> 组件中的路由器链接时，浏览器会向下滚动到路由器出口？

这就是我的app.component.html 现在的样子：

<div class="container-fluid h-100">
  <app-navbar></app-navbar>
  <div class="row h-100">
    <app-header class="h-100 overflow-auto col-md-12  col-lg-5"></app-header>
    <div id="main" class="h-100 overflow-auto col-md-12 col-lg-7">
      <router-outlet #o="outlet"></router-outlet>
    </div>
  </div>
</div>

<app-navbar>包含路由器链接，<app-header>占移动设备高度的 100%。所以我想确保每当用户点击导航栏中的链接时，页面都会向下滚动到<app-header>下新加载的组件

我查看了这个库：https://www.npmjs.com/package/ngx-page-scroll，但无法让它滚动（我想是因为我试图滚动到不同组件的元素）。

就在我要编辑这条消息时，我发现了这个库：https://www.npmjs.com/package/angular-scroll，但同样的事情，我不知道如何让它工作。

Answer 1

经过一番研究，这是一个可行的解决方案：

1. 确保<app-module>获取<app-navbar>中的点击事件

app-navbar.html 中的链接示例：

<a class="nav-link" routerLink="bio" routerLinkActive="active" (click)="scrollToMain()" >Bio</a> 

app-navbar.ts 示例

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  @Output() scroll: EventEmitter<any> = new EventEmitter();

scrollToMain() {
    this.scroll.emit(true);
  }
}

1. 在 app.component.html 中捕获事件

<div class="container-fluid h-100">
  <app-navbar  (scroll)="onScroll('#main')"></app-navbar>
  <div class="row h-100">
    <app-header class="h-100 overflow-auto col-md-12  col-lg-5"></app-header>
    <div id="main" [@routeAnimations]="o && o.activatedRouteData && o.activatedRouteData['animation']"
      class="h-100 overflow-auto col-md-12 col-lg-7">
      <router-outlet #o="outlet"></router-outlet>
    </div>
  </div>
</div>

作用于 app.component.ts 中的事件

import { Component, Inject} from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { PageScrollService } from 'ngx-page-scroll-core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) {
  }

  onScroll(target) {
    this.pageScrollService.scroll({
      document: this.document,
      scrollTarget: target,
    })
  }
}

它也可以与 scrollIntoView 一起使用，但我使用 ngx-page-scroll 让事情变得更糟：https://www.npmjs.com/package/ngx-page-scroll。

希望它可以帮助某人:)