Mat-tab-group header 更快的动画滚动

Question

当我有一排比其显示宽度更宽的选项卡时，会出现 V 形。我喜欢这样，但是单击它们会缓慢移动选项卡，而不是移动到下一个选项卡。是否有控制滚动速度的配置以及强制查看下一个选项卡的方法？

这是一个堆栈闪电战：https://stackblitz.com/edit/angular-79cupm

Answer 1

在您的 main.ts 中，您必须将其添加到您的导入中：

import { MAT_TABS_CONFIG } from '@angular/material/tabs';

然后您可以通过将其添加到您的提供程序数组来更改 InjectionToken 的值：

{ provide: MAT_TABS_CONFIG, useValue: { animationDuration: 100 }}

使用此配置，动画时间将为 100 毫秒

import './polyfills';

import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DemoMaterialModule} from './material-module';

import {TabGroupBasicExample} from './app/tab-group-basic-example';
import { MAT_TABS_CONFIG } from '@angular/material/tabs';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [TabGroupBasicExample],
  declarations: [TabGroupBasicExample],
  bootstrap: [TabGroupBasicExample],
  providers: [
    { provide: MAT_TABS_CONFIG, useValue: { animationDuration: 100 }}
  ]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

工作 Stackblitz 示例：https://stackblitz.com/edit/angular-79cupm-39vcws 希望我能帮到你:)