javascript - 如何滚动到 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 .

希望对大家有帮助:)