Как перейти к элементу на странице, если щелкнуть ссылку в отдельном компоненте панели инструментов Angular 7

Question

У меня есть проект Angular 7 с панелью инструментов mat в верхней части страницы, содержащей ссылки.Ниже это длинное представление, составленное из различных разделов.Каждый раздел является его собственным компонентом.Я добился этого, создав один компонент - Home - и затем поместил селекторы компонентов для каждого раздела один под другим в домашнем шаблоне.Таким образом:

// Home component template
<app-intro></app-intro>
<app-ourservices></app-ourservices>
<app-ourwork></app-ourwork>
<app-contact></app-contact>

Я хочу иметь возможность щелкнуть ссылку на панели инструментов мат (которая является его собственным компонентом) и сделать прокрутку домашней страницы до соответствующего раздела с анимацией.

Следующее работает, но заставляет представление перейти к разделу.

<a href="home#servicesSection">Services</a>

Мне также известно об использовании события click в сочетании с .scrollIntoView:

scroll(element: HTMLElement) {
    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }

Но, похоже, это работает, только когда все (теги id и события кликов) содержатся в одном и том же компоненте (то есть на одной странице).

Как мне добиться того, что я пытаюсь сделать, новсе еще держать вещи разделенными на компоненты?Я новичок в Angular, поэтому могу неправильно структурировать вещи.

Answer 1

В вашем HTML - дайте элементам ссылочные переменные #nameHere

<div #intro>
    <app-intro></app-intro>
</div>
<div #ourservices>
    <app-ourservices></app-ourservices>
<div #ourwork>
    <app-ourwork></app-ourwork>
</div>
<div #contact>
    <app-contact></app-contact>
</div>

В вашем файле .ts - Используйте @ViewChild, чтобы получить ссылку на элемент с помощью ссылочных переменных, затем используйте navtiveElement с scrollIntoView()

import { ... ViewChild } from "@angular/core";

....

@ViewChild('intro') intro: ElementRef;
@ViewChild('ourserivces') ourservices: ElementRef;
@ViewChild('ourwork') ourwork: ElementRef;
@ViewChild('contact') contact: ElementRef;

contstructor(....)


public scrollToIntro() {
    this.intro.nativeElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
        inline: 'nearest'
    });
}

public scrollToOurServices() {
    this.ourserivces.nativeElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
        inline: 'nearest'
    })
}

public scrollToOurWork() {
    this.ourwork.nativeElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
        inline: 'nearest'
    })
}

public scrollToContact() {
    this.contect.nativeElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
        inline: 'nearest'
    })
}

Использование - в вашем HTML

<div (click)="scrollToIntro()">Intro</div>
<div (click)="scrollToOurServices()">Services</div>
<div (click)="scrollToOurWork()">Our Work</div>
<div (click)="scrollToContact()">Contact</div>