Angular 5 Tabs滚动到页面顶部

<ng-container *ngFor="let tab of tabs">
  <ng-template #tabContent>
    <!-- 选项卡的内容 -->
  </ng-template>
</ng-container>

selectedTabIndex: number = 0;

selectTab(index: number) {
  this.selectedTabIndex = index;
}

<div class="tab" [ngClass]="{'active': selectedTabIndex === i}" (click)="selectTab(i)" *ngFor="let tab of tabs; let i = index">
  <!-- 选项卡的标题 -->
</div>

import { Component, ViewChild, ElementRef } from '@angular/core';
import { ViewportScroller } from '@angular/common';

@Component({
  // 组件的其他配置
})
export class TabsComponent {
  @ViewChild('top') topElement: ElementRef;

  constructor(private viewportScroller: ViewportScroller) {}

  selectTab(index: number) {
    this.selectedTabIndex = index;
    this.scrollToTop();
  }

  scrollToTop() {
    const topPosition = this.topElement.nativeElement.offsetTop;
    this.viewportScroller.scrollToPosition([0, topPosition]);
  }
}