Angular 6：从子组件侧导航单击时滚动到元素

Question

我正在使用 A6 路由器在 /new 路由上渲染 3 个组件。我也在使用Angular-material 并使用sidenav 组件。我的 parentComponent 是主要内容区域，而 childComponent 是抽屉内容。

  {
    path: 'new',
    children: [
      {
        path: '',
        component: ParentComponent
      },
      {
        path: '',
        component: SiblingComponent,
        outlet: 'nav',
        children: [
          {
            path: '',
            component: ChildComponent
          }
        ]
      }
    ]
  }

子组件html

<div class="new-event-side-nav">
  <mat-nav-list>
    <a mat-list-item>
    <span>Some Details</span>
    </a>
    <a mat-list-item [href]="otherDetail">
    <span>Other Details</span>
    </a>
  </mat-nav-list>
</div>

父组件

<mat-card>
    <div id="some_detail">
      <p>Some Content</p>
    </div>
    <div id="other_detail">
      <p>Other Content</p>
    </div>
</mat-card>

我可以使用

在我的子组件中提取两个 div 的 ID

otherDetail = document.getElementById('other_detail');

并将其注入到我的子组件的 html 中。但是点击它并没有向下滚动到元素，我得到一个 404。此外，我的网址从 /new 更改为 /%5Bobject%20HTMLDivElement%5D

我是 Angular 6 中滚动到元素的新手。任何人都有使用子元素的 sidenav 滚动到不同元素的经验？

Answer 1

大约一年前，我遇到了同样的挑战，我不得不编写自己的解决方案。不过，我对它从来都不是很满意——让自动滚动平滑和自然看起来比我想象的要复杂得多（因为 'scrollTop' 不是可动画的属性）。它让我陷入了研究 javascript '缓动函数'的兔子洞……不要走那条路。

如果归根结底，您可以绑定到任何 div 的 scrollTop 属性。如果在指令中您可能会使用 HostBinding，即 -

 @HostBinding('scrollTop') scrollTop : number = <<whatever...>>;

或者如果它是模板中的子元素，你可以编写普通的属性绑定

 <div class="scrolling-div" [scrollTop]="scrollTop" ></div>

这样它就可以根据需要向上和向下滚动 div 了 - 但它基本上是即时的，除非您使用计时器/间隔手动为其设置动画。我将此技术与一个非常简单的链接指令相结合，我将其放置在我希望能够滚动到的每个元素上。该链接指令在页面上发出其垂直位置（为滚动条提供目的地），并且每当单击它时都会发出一个事件以提醒滚动条。我能够让我的看起来不错 - 没有缓动，但有可以容忍的线性动画。如果您打算编写自己的解决方案，请告诉我，我可以分享我当天写的所有代码