Question

我有3个组成部分：Home，Add，Status。

在家里，我的栏目ID是“关于”

在Navbar中，我有主页，关于，添加，状态。

在“主页”中，当我在导航栏中单击“关于”时，它会滚动到关于部分。在“关于” /“添加”中并在导航栏中单击“关于”时，它将加载Home组件，但不会滚动到Home，尽管URL更改为http://localhost:4200/#about。

您能为此提供解决方案还是重定向到现有解决方案，因为我找不到它。

这是我的导航栏的外观：

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#"> <img src="../../../assets/img/logo.png" width="70" height="50" alt=""></a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" (click)="toggleNavbar()"
          data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true"
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" [ngClass]="{ 'show': navbarOpen }" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li (click)="toggleNavbar()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
          class="nav-item ">
        <a [routerLink]="['/']" class="nav-link">Home</a>
      </li>
      <li (click)="toggleNavbar()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
          class="nav-item ">
        <a [routerLink]="['/add']" class="nav-link">Add Event</a>
      </li>
      <li (click)="toggleNavbar()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
          class="nav-item ">
        <a [routerLink]="['/status']" class="nav-link">Status</a>
      </li>
       <li (click)="toggleNavbar()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
          class="nav-item ">
        <a [routerLink]="['/']"  [fragment]="'about'" class="nav-link">About</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

您可以尝试使用ng2-scroll-to-el。

通过npm安装：

npm install --save ng2-scroll-to-el

然后将其包含在您的应用模块中：

import { Component, NgModule } from '@angular/core';
import { ScrollToModule } from 'ng2-scroll-to-el';

@NgModule({
  imports: [
    ScrollToModule.forRoot()
  ]
})
export class MyModule {}

用法：

在您的.html中：

<div class="home" #home></div>
<button class="btn" (click)="scrollToHome(home)">Top</button>

在您的.ts中：

import { ScrollToService } from 'ng2-scroll-to-el';

export class DemoComponent {

    constructor(private scrollService: ScrollToService) {}

    scrollToHome(element) {
        this.scrollService.scrollTo(element, 700, 0);
    }
}

工作demo。

如何从Angular 6中的另一个组件滚动到一个组件的div？

1 个答案: