Angularmat-tab被快速选择时自动切换选项卡的问题。
创始人
2024-10-28 07:01:16
0次

使用MatTabNav部分的_selectedIndex更改事件,并添加一个小延迟以解决切换太快的问题。

HTML模板:


    

组件:

import { Component, ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('matTabs') matTabs: MatTabGroup;
  tabs = ['Tab 1', 'Tab 2', 'Tab 3'];

  onTabChange(event: any) {
    // ...your code
  }

  onSelectedIndexChange(event: any) {
    // Add a little delay to avoid tab toggling
    const observable: Observable = of(event).pipe(delay(50));
    observable.subscribe(() => {
      this.matTabs.selectedIndex = event.index;
    });
  }
}

相关内容

热门资讯

一分钟了解!!wepoker底... 『标题:当前标题』主打赛后复盘的 AI 游戏攻略黑科技走红,对局总结能力开挂。上传对局回放或者战绩截...
今日公布!wepokerplu... AI 黑科技赛道又上新,这款智能处理工具堪称效率开挂,专门面向短视频创作者打造。它打通脚本撰写、AI...
玩家必知教程!wepoker透... 您好,玩家必知教程!wepoker透视破解版,WPK有挂吗助手(都是真的有辅助挂)这款游戏可以开挂的...
一起来讨论!wpk显示有作弊,... AI 黑科技赛道又上新,这款智能处理工具堪称效率开挂,专门面向短视频创作者打造。它打通脚本撰写、AI...
揭秘几款!德普之星私人局辅助器... 揭秘几款!德普之星私人局辅助器,德扑之星真的有透视吗下载(原生有辅助挂)AI 智能体黑科技再上新,自...
科技通报!!wpk辅助,德普之... 科技通报!!wpk辅助,德普之星透视挂教程(原先是有透视)AI 智能体黑科技再上新,自动化能力开挂,...
如何分辨真伪!wpk透视是真的... AI 黑科技赛道又上新,这款智能处理工具堪称效率开挂,专门面向短视频创作者打造。它打通脚本撰写、AI...
最新研发!wepokerplu... 最新研发!wepokerplus作弊,wepoker透视软件下载软件(竟然存在有开挂)AI 智能体黑...
重大通报透视器!娱家麻将透视器... 重大通报透视器!娱家麻将透视器AI脚本,娱家麻将多功能切实真的是有透视器脚本1、娱家麻将辅助软件下载...
重大消息开挂!家乡大贰开挂AI... 重大消息开挂!家乡大贰开挂AI插件,家乡大贰多功能果然有开挂插件家乡大贰脚本下载中分为三种模型:家乡...