在Angular 4中，单击后滚动到元素

10 浏览
0 Comments

在Angular 4中，单击后滚动到元素

当按下按钮时，我想要能够滚动到目标位置。我考虑的是这样的代码：

然后在我的component.ts中写一个方法：

scroll(element) {
    window.scrollTo(element.yPosition)
}

我知道上面的代码是无效的，只是为了展示我所想的。我刚开始学习Angular 4，之前没有任何Angular的经验。我一直在寻找类似的例子，但所有的例子都是AngularJs的，与Angular 4有很大的不同。

0

3 答案

0 Comments

问题：如何在Angular 4中实现点击按钮后滚动到指定元素的位置？

解决方法：

1. 在HTML中，使用

Your target

2. 在组件中，定义scroll函数，接收一个HTMLElement参数el，使用el.scrollIntoView()方法进行滚动：

scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
}

3. 如果目标元素#target在按钮之后定义，可能会导致滚动失败。这在有浮动头部的情况下是相关的。

备注：{behavior: 'smooth'}参数可以实现平滑滚动效果。

0
0 Comments

在Angular 4中，当我们想要在点击按钮时滚动到特定元素时，有一种常见的方法可以实现。首先，在HTML模板中，我们为按钮的点击事件绑定一个方法，并将目标元素传递给该方法。然后，在组件中，我们定义这个方法，并使用元素的scrollIntoView()方法实现滚动效果。

具体的代码如下所示：



Your target



scroll(el: HTMLElement) {
  el.scrollIntoView();
}

在这个例子中，我们使用了一个按钮和一个目标元素。当按钮被点击时，它会调用scroll方法，并将目标元素作为参数传递给该方法。在scroll方法中，我们使用传递进来的目标元素调用scrollIntoView()方法，实现滚动到目标元素的效果。

然而，有一些评论指出，由于目标元素未定义，这种方法不再起作用。但我在Angular 7中创建了一个StackBlitz示例，仍然可以正常工作。如果有人能够提供一个无法工作的例子，请告诉我。

如果这种方法在你的代码中没有起作用，你可以检查一下scroll方法是否被执行。可以在方法中添加一个console.log(el)，并打开浏览器的开发者工具，查看是否获取到了正确的元素。同时，还可以检查控制台是否有错误信息。

此外，还有一些其他的方法可以传递给scrollIntoView()方法的参数，具体取决于你的需求。你可以在这里查看更多信息：[https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)

另外，如果你想在组件内部获取到目标元素而不必传递它，你可以使用@ViewChild装饰器来实现。具体的用法可以参考这个链接：[https://stackoverflow.com/questions/47616843](https://stackoverflow.com/questions/47616843)

总结一下，通过在点击事件中调用scroll方法，并将目标元素作为参数传递给该方法，我们可以实现在Angular 4中点击按钮后滚动到特定元素的效果。这种方法简单有效，并且可以根据需要进行扩展和定制。

0
0 Comments

Angular 4中如何在点击时滚动到元素？

在Angular 4中，可以通过以下方式实现这一功能。

首先，在模板中添加以下代码：


  
Categories

然后，在组件中添加以下函数：

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

这个函数会在点击标签时被调用，并且会滚动到对应的元素。

需要注意的是，在模板中需要设置元素的id，才能通过`getElementById`函数获取到对应的元素。

这是一个简单的实现方式，可以让页面在点击某个标签时滚动到对应的元素。在Angular 9和Angular 11中也适用。

如果你希望实现动画效果，可以参考[stackoverflow.com/a/36180398/1266873](https://stackoverflow.com/a/36180398/1266873)中的解答。

0