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

【问题标题】：How to scroll to a component from another component in Angular?如何从Angular中的另一个组件滚动到一个组件？
【发布时间】：2021-06-17 16:34:14
【问题描述】：

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

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

<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 和一切，但似乎无法使其工作。我不确定我是否需要使用输入输出来让他们交流或类似的东西，任何东西都会有所帮助，谢谢。

【问题讨论】：

第一页?
我不建议在组件中使用body 标签，入口页面中应该只有一个（index.html 等）

标签： javascript html css angular

【解决方案1】：

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

<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)。

【讨论】：

【解决方案2】：

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

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

index.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 一种{ 光标：指针 }

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

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

【讨论】：