我有一个带有固定顶部导航栏的 Angular 8 SPA，可以将用户自动滚动到他单击的部分。
首先，我使用了一个简单的href="#section1". 当用户单击导航栏中的链接时，相关部分将正确显示。但我想让它变得流畅，所以我决定改用这里scrollIntoView所示的方法。
不幸的是，它似乎不起作用。该方法scrollToElement()在 中，navbar component而目标部分在另一个组件中（目前，app component，但将来会改变......）。因为锚点在另一个组件中，所以当我单击时<a>，元素未定义，我在控制台中收到此错误：ERROR TypeError: Cannot read property 'scrollIntoView' of undefined
app.component.html
...
<div #section1></div>
<div #section2></div>
<div #section3></div>
<div #section4></div>
...
navbar.component.html
...
<li class="nav-item">
<a (click)="scrollToElement(section1)" class="nav-link">Section1</a>
</li>
...
navbar.component.ts
...
scrollToElement($element: any): void {
console.log($element); //returns undefinded
$element.scrollIntoView({ //throws an error because $element is undefined
behavior: "smooth",
block: "start",
inline: "nearest"
});
}
...
我想我遇到了问题，但我不明白如何解决它。在使用该方法之前，我应该在 中使用变量navbar.component.ts来存储元素吗？scrollIntoView
在此先感谢您的帮助！
解决了
navbar.component.html
...
<li class="nav-item">
<a (click)="scrollToElement('#section1')" class="nav-link">Section1</a>
</li>
...
navbar.component.ts
...
scrollToElement(selector) {
const element = document.querySelector(selector)
element ? element.scrollIntoView({behavior: "smooth"}): null;
}
...