如何从 Angular 中的另一个组件滚动到一个组件？

Question

我已经花了几个小时，甚至几天的时间试图完成这项工作，但我找不到解决方案，我已经尝试了所有方法，但还没有找到像我这样的案例。

我正在尝试从导航栏滚动到我的单页网站中的另一个组件，这是另一个组件。 我设置的主要应用程序组件是这样的：

 <body> <app-navbar></app-navbar> <app-page-one id="page-one"></app-page-one> <app-page-two id="page-two"></app-page-two> <app-page-three id="page-three"></app-page-three> <app-footer></app-footer> </body>

如您所见，我在每个组件上都放置了一个 ID，以便在尝试滚动时可以识别它。

我想单击导航栏中的第三页按钮以使其向下滚动到第三页组件。 我的导航栏组件如下所示：

 <body class="body"> <header class="header"> <a href="#" class="logo">LOGO</a> <div class="menu-toggle"> <fa-icon [icon]="faBars" transform="grow-20"></fa-icon> </div> <nav class="nav"> <ul> <li> <a href="#">Page One</a> </li> <li> <a href="#">Page Two</a> </li> <li > <a href="#">Page Three</a> </li> </ul> </nav> </header> </body>

我试过使用 Ngx Page Scroll 和所有东西，但似乎无法让它工作。 我不确定是否需要使用 Input Output 来让他们进行通信或类似的东西，任何事情都会有所帮助，谢谢。

Answer 1

每个 href 都需要引用您希望 ngx-page-scroll 将视口移动到的 element.id。 所以身体应该是这样的。

<li>
    <a href="#page-one">Page One</a>
</li>
<li>
    <a href="#page-two">Page Two</a>
</li>
<li >
     <a href="#page-three">Page Three</a>
</li>

如果您参考 npm 页面并查看 url，请访问 https://www.npmjs.com/package/ngx-page-scroll#usage 。 您可以看到文档的使用部分 ( id="usage" ) 有一个链接和一个元素引用 ( #usage )。

Answer 2

您可以使用 angular router fragment 或 angular cdk 进行滚动。 我发现 angular router 是最简单的，但我会给你 angular cdk 的链接，以防你不喜欢这种方式。

index.html 上的第一件事是声明一个样式标记 - 因为没有它平滑滚动不会平滑滚动。

索引.html

 <style>
 html {
  scroll-behavior: smooth;
 }
</style>

您可以根据需要更改滚动偏移量app-router.module.ts

 imports: [RouterModule.forRoot(routes,  {scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled',
  scrollOffset: [0, 64]})]

然后你的component.ts

            <li>
                <a routerLink="." fragment="page-one" >Page One</a>
            </li>
            <li>
                <a routerLink="." fragment="page-two">Page Two</a>
            </li>
            <li >
                <a routerLink="." fragment="page-three">Page Three</a>
            </li>

编辑你的component.css a{ cursor: pointer }

您也可以这样做以滚动到其他视图上的片段。 https://angular.io/api/router/RouterLink

例如，您可能需要在每个片段上添加一个比 id #page-two 更好的 #。 你会改变片段来反映这一点。 cdk 方式在此链接中https://material.angular.io/cdk/scrolling/overview

如何从 Angular 中的另一个组件滚动到一个组件？

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-06-17 16:58:35

解决方案2
0 2021-06-17 18:32:09

如何从 Angular 中的另一个组件滚动到一个组件？

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-06-17 16:58:35

解决方案2 0 2021-06-17 18:32:09

解决方案1
1 已采纳 2021-06-17 16:58:35

解决方案2
0 2021-06-17 18:32:09