如何防止Angular自动导航到页面中间

Question

我创建了一个简单的 Angular 11 应用程序。我的问题是当我导航到这个页面时（见 gif）它会自动向下滚动一点。我不需要这种行为。请参阅附件。 （当导航页面 A 到 B 时）

这是用户点击导航的地方，(homepage.html)

<div *ngFor="let section of sections" class="col-md-4 p-2 p-sm-5">
      <div class="bg-red3 box d-flex flex-column justify-content-end p-1 box">
        <a routerLink="sections" class="nav-link"><h4>{{section.name}}</h4></a>
      </div>
    </div>

这是主页.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.scss']
})
export class HomepageComponent implements OnInit {
  sections = [
    {
      name : 'Classroom Programme',
      background : 'blue',
      image : 'url("https://picsum.photos/200/300"),linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))',
      'background-position' : 'center center',
      'background-repeat': ' no-repeat',
      'background-size': 'cover',
      'background-blend-mode' : 'overlay',
      key: '1',
    },
    {
      name : 'Distance Learning programme 1(DLP)',
      background : 'blue',
      image : 'url("https://picsum.photos/200/300"),linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))',
      'background-position' : 'center center',
      'background-repeat': ' no-repeat',
      'background-size': 'cover',
      'background-blend-mode' : 'overlay',
      key:2

    },
    {
      name : 'Drishti Web Store',
      background : 'blue',
      image : 'url("https://picsum.photos/200/300"),linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))',
      'background-position' : 'center center',
      'background-blend-mode' : 'overlay',
      'background-repeat': ' no-repeat',
      'background-size': 'cover',
      key:3
    },
  ];
  constructor() { }

  ngOnInit() {
  }

}

这是第二页 HTML（这是问题页面）。

 <section id="tags" class="container py-3 py-md-5">
      <div class="row">
        <div class="col-12">
          <a id="{{tag.id}}" class="tag {{selectedId==tag.id ? 'active' : ''}}" (click)="onSelected(tag.id,$event)" *ngFor="let tag of tags">{{tag.name}}</a>
        </div>
      </div>
    </section>
    <div class="container">

      <section class="row">
        <section class="col-12 col-md-4">
          <div class="wrapper p-2 p-sm-4 shadow p-3 mb-5 bg-white rounded">
            <h4>This is title</h4>
            <p>Live from</p>
            <p>2021/01/21</p>
            <button class="btn bg-red3  ml-0 mr-2">get Now</button>
            <button class="btn bg-red3 ml-2 mr-0">Solutions</button>
          </div>
        </section>
        
        //more sections but I cutted it to post the question

这是第二页 ts 文件。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sectionspage',
  templateUrl: './sectionspage.component.html',
  styleUrls: ['./sectionspage.component.scss']
})
export class SectionspageComponent implements OnInit {

  constructor() { }

  tags=[
    {
      name: 'Category 1',
      id : 1
    },
    {
      name: 'Cat 1',
      id : 1
    },
    I have added more objects. But now I cut it to post short the question
  ]



  ngOnInit(): void {

  }

  selectedId;
  onSelected(id,event){
    this.selectedId = id;
    console.log(event.target.id);
  }

}

这是 ng --serve 的输出

Angular CLI: 11.1.1
Node: 12.16.3
OS: win32 x64
Angular: 11.1.0

如何在应用程序中避免这种行为？仅此组件会发生这种情况。

Answer 1

我找到了自己问题的答案。

在您的应用路由模块中，将以下内容添加到 RouterModule

RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})