Простое решение, которое работает для страниц без каких-либо параметров запроса, совместимо с браузером назад / вперед, маршрутизатором и глубокой связью.
<a (click)="jumpToId('anchor1')">Go To Anchor 1</a>
ngOnInit() {
// If your page is dynamic
this.yourService.getWhatever()
.then(
data => {
this.componentData = data;
setTimeout(() => this.jumpToId( window.location.hash.substr(1) ), 100);
}
);
// If your page is static
// this.jumpToId( window.location.hash.substr(1) )
}
jumpToId( fragment ) {
// Use the browser to navigate
window.location.hash = fragment;
// But also scroll when routing / deep-linking to dynamic page
// or re-clicking same anchor
if (fragment) {
const element = document.querySelector('#' + fragment);
if (element) element.scrollIntoView();
}
}
Тайм-аут - это просто позволить странице загружать любую динамическую данные «защищены» с помощью * ngIf. Это также можно использовать для прокрутки до верхней части страницы при изменении маршрута - просто укажите основной якорный тег по умолчанию.
Убедитесь, что вы указали свой адрес электронной почты в своей карточке контакта в приложении «Контакты».
:)