单击按钮 - 导航执行不同的组件 angular

Question

这是我的网页的一个片段 snippet

如您所见，我的工具栏上有可爱的小按钮

我正在尝试通过单击这些按钮导航到我的页面的各个部分（点击关于我应该向下滚动到关于我部分的开头）我很难弄清楚这一点。

我将 post 工具栏下方和关于我的组件，以及 app.component.html 文件。

toolbar.html:

<mat-toolbar class="example-toolbar">
  <span style="margin-left: 120px; height: 40px">Jane Doe</span>
  <span class="example-spacer"></span>

  <div>

    <button mat-button >
      About
    </button>
....

（其余只是相同的按钮标签，但用于其他内容）

关于-me.component.html:

<div class="main-div" id="abme">
  <mat-card class="example-card shadow">
    <mat-card-content>
      <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-around center">
        <div fxLayout="column" fxFlex="50%">

          <p class="title">About me</p>
          <br>

          <p class="about-me-content" style="font-size: 16px">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac quam augue tempor blandit et sit amet mi.
            Donec fringilla dictum tellus, sed porttitor diam. In tempus turpis quis aliquet efficitur.
            Proin auctor lacus rhoncus ultrices hendrerit. Sed eu aliquet metus, vulputate lacinia ex. <br>
            <br> Nulla venenatis nulla nec tellus convallis iaculis id hendrerit nibh. Pellentesque sed eleifend diam.
            Suspendisse nec rhoncus augue, id pellentesque sem. Nullam pellentesque ipsum ut dignissim semper.
          </p>
        </div>

        <div fxLayout="column" fxFlex="50%" style="padding-left: 150px">
        // then in this column are the icons, i believe irrelevant to this problem

      </div>
    </mat-card-content>
  </mat-card>
</div>

和app.component.html：

<app-toolbar></app-toolbar>
<br>
<app-cover-card></app-cover-card>
<br><br>
<app-about-me style="padding: 30px"></app-about-me>
<br><br>
<app-professional-skills style="padding: 40px"  ></app-professional-skills>

.ts 文件与生成时一样，我没有更改其中的任何内容。任何 suggestions/useful 链接将不胜感激！

Answer 1

您必须使用 scrollIntoView() 来滚动页面。在 ts 文件中提供页面的正确元素 ID 以进行导航。

toolbar.html:

<button mat-button (click)="navigateSection()">
      About
</button>

toolbar.ts:

 navigateSection(): any {
    const element = document.getElementById('abme') as HTMLElement;
    element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
 }

在这里，当点击“关于”按钮时，它会顺利导航到页面中的“关于”部分。

Answer 2

使用 routerLink 属性

<button type="button" mat-raised-button color="warn" routerLink="/component">

单击按钮 - 导航执行不同的组件 angular

Button click - navigate do different component angular

html

scroll

angular-material

angular