Angular 如何在单独的工具栏组件中单击链接时滚动到页面上的元素

我有一个Angular 7项目，在包含链接的页面顶部有一个mat工具栏。下面是由多个部分组成的远景。每个部分都是自己的组成部分。我通过创建一个组件（Home）实现了这一点，然后在Home模板中将每个部分的组件选择器放置在另一个下。因此：

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

但这似乎只有在所有内容（id标记和单击事件）都包含在同一组件中（即在同一页面上）时才起作用

---

我如何才能实现我正在尝试做的事情，但仍然将事情分为几个部分？我是Angular的新手，所以可能结构不正确。

在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>

用法-在HTML中

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

Intro
服务
我们的工作
接触

在HTML中-在此处提供元素引用变量

#name

<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>

用法-在HTML中

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

Intro
服务
我们的工作
接触

您可以使用id或类将每个自定义组件包装在一个div中，然后在包装器上使用scrollIntoView。我想你已经试过直接使用组件html标签了？@Shannon是的，你是对的。我没有传递元素（组件不知道该元素），而是传入了id，然后使用document.getElementWithId获取对需要滚动到的元素的引用。发布答案，我会将其标记为正确。您可以使用id或类将每个自定义组件包装在一个div中，然后在包装上使用scrollIntoView。我想你已经试过直接使用组件html标签了？@Shannon是的，你是对的。我没有传递元素（组件不知道该元素），而是传入了id，然后使用document.getElementWithId获取对需要滚动到的元素的引用。把答案贴出来，我会把它标对的。

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