У меня есть 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;
}
...