Question

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

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

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>

parentComponent

<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-但它基本上是即时的，除非您使用计时器/间隔手动为其设置动画。我将此技术与一个非常简单的链接指令结合在一起，该指令放置在我希望能够滚动到的每个元素上。该链接伪指令在页面上发出其垂直位置（以使滚动条成为目的地），并且在单击它以警告滚动条时也发出一个事件。我能够让我的看起来还不错-不放松，但是有可以忍受的线性动画。如果您打算编写自己的解决方案，请告诉我，我可以分享当天写回的所有代码

角度6：从子组件side-nav单击时滚动到元素

1 个答案: