Question

当我有一排标签的宽度超过其显示宽度时，将出现人字形。我很喜欢，但是单击它们会缓慢移动选项卡，而不是移动到下一个选项卡。是否有配置来控制滚动速度以及强制下一个选项卡进入视图的方式？

这是一个堆叠闪电战：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 }}

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

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 希望我能为您提供帮助：）

Mat-tab-group标头使动画滚动更快

1 个答案: