如何通过路由和导航滚动到当前页面的某个组件？

Question

我正在开发 angular7 并制作一个用于学习目的的应用程序。我的导航栏上有 5 个组件。当我单击导航栏上的任何链接时，它会打开相应的组件。我只看到那个组件，所有其他组件都被隐藏了。 我想要什么，我需要它在同一页面上显示相应的组件并向上或向下滚动。 （作为单页应用）

我希望我已经有效地解释了我的问题。谁能帮帮我？

这是我的带有导航栏的标题组件：

<nav>
<ul>
   <li class="nav-item">
      <a class="nav-link" routerLink="/home" routerLinkActive="active">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" routerLink="/about" routerLinkActive="active" >About Us</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" routerLink="/faculty" routerLinkActive="active" >Faculty</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" routerLink="/students" routerLinkActive="active" >Students</a>
   </li>
   <li class="nav-item ">
      <a class="nav-link" routerLink="/contact" routerLinkActive="active" class="nav-link" >Contact</a>
   </li>
</ul>
</nav>

这是我的 app-routing.module.ts 文件：

const routes: Routes = [
{ path: '' , redirectTo:'/home', pathMatch:'full'},
{ path: 'home' , component: HomeComponent},
{ path: 'sectoin' , component: SectionComponent },
{ path: 'about' , component: AboutComponent },
{ path: 'students' , component: StudentsComponent },
{ path: 'faculty' , component: FacultyComponent },
{ path: 'contact' , component: ContactComponent },
];

Answer 1

您不需要router 来实现这一点，但普通的旧javascript 应该可以工作。

只需使用scrollIntoView 即可查看该块。

在https://stackblitz.com/edit/angular-scrollintoview-sample创建的示例

Answer 2

在您的模板中使用锚标记（id），如下所示：

<!-- ... -->
<li class="nav-item">
   <button class="nav-link" routerLink="/home" routerLinkActive="active" (click)="scrollTo('home')>Home</button>
</li>

<!-- ... -->

<h2 id="home>Welcome Home</h2>

...并定义您的 scrollTo() 函数：

import { ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

// ... export class MyClass {

  @ViewChild(Content) content: Content;

  // ... constructor() { ... }

  scrollTo(element:string): void {
    let yOffset = document.getElementById(element).offsetTop;
    this.content.scrollTo(0, yOffset, 1500)
  }

// ... }

改变1500毫秒调整速度