使用 mat-tab-group 以编程方式在 Angular 2 材料中选择 mat-tab

Posted

技术标签:

【中文标题】使用 mat-tab-group 以编程方式在 Angular 2 材料中选择 mat-tab【英文标题】:Programmatically select mat-tab in Angular 2 material using mat-tab-group 【发布时间】:2017-06-15 16:26:45 【问题描述】:

如何在事件发生时选择特定选项卡?

我尝试使用[selectedIndex]="selectedTab"selectedTab 更改为所需的标签索引,但在加载标签后它似乎不起作用。

【问题讨论】:

【参考方案1】:

更新(使用最新的角度+材质)

有多种方法..

    可能的解决方案,使用双向数据绑定
<button mat-raised-button (click)="demo1BtnClick()">Tab Demo 1!</button>
<mat-tab-group [(selectedIndex)]="demo1TabIndex">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
    <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>
public demo1TabIndex = 1;
public demo1BtnClick() 
  const tabCount = 3;
  this.demo1TabIndex = (this.demo1TabIndex + 1) % tabCount;

    可能的解决方案,使用模板变量并通过我们的点击功能
<button mat-raised-button (click)="demo2BtnClick(demo2tab)">Tab Demo 2!</button>
<mat-tab-group #demo2tab>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
public demo2BtnClick(tabGroup: MatTabGroup) 
  if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;

  const tabCount = tabGroup._tabs.length;
  tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;

    可能的解决方案,使用@ViewChild
<button mat-raised-button (click)="demo3BtnClick()">Tab Demo 3!</button>
<mat-tab-group #demo3Tab>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
@ViewChild("demo3Tab",  static: false ) demo3Tab: MatTabGroup;

public demo3BtnClick() 
  const tabGroup = this.demo3Tab;
  if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;

  const tabCount = tabGroup._tabs.length;
  tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;

现场演示:https://stackblitz.com/edit/angular-selecting-mattab?file=src%2Fapp%2Fapp.component.ts

【讨论】:

这只对我有用一次。使用[(selectedIndex)] 进行双向绑定。 我必须混合解决方案 1 和 3 以获得良好的行为。谢谢。 我实现了 #1 来触发两个选项卡,一个用于登录的选项卡,一个用于注册的选项卡。要以编程方式触发注册选项卡,请通过“没有帐户?创建帐户”的链接 - 它有效。谢谢!尽管我将链接作为子组件并且必须通过 eventEmitter 触发。仍然像魅力一样工作。 @Mathias 感谢您使用[(selectedIndex)] 进行双向绑定的想法。它对我帮助很大。【参考方案2】:

如果它对任何人有帮助,也可以在组件中的 MatTabGroup 上设置selectedIndex

如果您的 html 有:&lt;mat-tab-group #tabs&gt;,您可以使用 @ViewChild('tabs') tabGroup: MatTabGroup; 在组件中获取对它的引用。

然后你可以在 OnInit 函数或其他地方做this.tabGroup.selectedIndex = newIndex;

【讨论】:

只是添加到这个答案中:Angular 8 现在需要 ViewChild 的“静态”对象:@ViewChild('tabs', static: false) tabGroup: MatTabGroup; 并且需要导入以下内容:import MatTabGroup from '@angular/material'; 对于延迟加载的内容,必须使用 ngAfterContentInit() 而不是 OnInit()。 Angular 首先需要“将外部内容投影到组件的视图中......”并且 ngAfterContentInit() 确保它是。见Angular life cycle hooks。【参考方案3】:

我也有类似的问题。在我的情况下,我需要在用户离开组件之前显示用户所在的选项卡。我通过将当前选定的选项卡索引填充到服务中解决了这个问题。

在 HTML 模板上我有这个:

<mat-tab-group [selectedIndex]="getSelectedIndex()" (selectedTabChange)="onTabChange($event)">

onTabChange和getSelectedIndex的实现如下:

    getSelectedIndex(): number 
        return this.appService.currentTabIndex
    

    onTabChange(event: MatTabChangeEvent) 
        this.appService.currentTabIndex = event.index
    

我的服务代码如下所示:

export class AppService 
    public currentTabIndex = 1  //default tab index is 1

【讨论】:

【参考方案4】:

我遇到了同样的问题,我尝试了上述答案,但它们没有帮助。这是我的解决方案:

在我的打字稿代码中,首先声明一个变量:

selected = new FormControl(0); // define a FormControl with value 0. Value means index.

那么,在函数中:

changeTab() 
    this.selected.setValue(this.selected.value+1);
  //

在html中,

 <mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
            <mat-tab label="label0">0</mat-tab>
            <mat-tab label="label1">1</mat-tab>
            <mat-tab label="label2">2</mat-tab>
            <mat-tab label="label3">3</mat-tab>
            <mat-tab label="label4">4</mat-tab>
            <mat-tab label="label5">5</mat-tab>
</mat-tab-group>

<button (click)="changeTab()">ChangeTab</button>

【讨论】:

在 Angular Material 文档中有一个示例,称为“具有动态更改选项卡的选项卡组”:material.angular.io/components/tabs/examples 这是最好的选择,它在上面的官方文档中。 不知道为什么,但我必须为 $event 指定索引属性:(selectedTabChange)="selected.setValue($event.index)"【参考方案5】:

@Input()selectedIndex: number | null: The index of the active tab.  

SelectedIndex expects a number binding as property, so you can select any tab starting from 0 to (workflow_list.length - 1)

<mat-tab-group class="m-t-30" [selectedIndex]="2">
    <mat-tab label="wf.ApproverName" *ngFor="let wf of workflow_list">
    </mat-tab>
</mat-tab-group>

【讨论】:

【参考方案6】:

我正在使用 angular 10 并使用 ngFor 制作我的 mat-options; 在我的情况下,没有一个解决方案不起作用,最后我发现 tabIndex 是列表中我们有 ngFor 的对象的索引;

<mat-tab-group mat-align-tabs="start" style="width: 100%;text-align: start;overflow: hidden"
                     (selectedTabChange)="setNodeInfo($event)" [(selectedIndex)]="selectedIpIndex">
        <mat-tab *ngFor="let nodeTab of nodeList" [tabIndex]="nodeTab.id">
          <ng-template mat-tab-label>
            <label>nodeTab.ip</label>
            <mat-icon class="close-btn" style="font-size: medium;z-index: 100" (click)="tabClose(nodeTab)">close
            </mat-icon>
          </ng-template>
        </mat-tab>
      </mat-tab-group>

如您所见,我在 html 中得到每个 tabIndex 值,如下所示:

[tabIndex]="nodeTab.id"

但它不起作用并根据自己的选择获取列表中的位置索引。

在我的 ts 文件中,我像这样填写 selectedIpIndex :

this.selectedIpIndex = this.nodeList.indexOf(node);

【讨论】:

以上是关于使用 mat-tab-group 以编程方式在 Angular 2 材料中选择 mat-tab的主要内容,如果未能解决你的问题,请参考以下文章

Angular Material Tab : 如果当前选项卡中的表单脏了,则防止 mat-tab-group 的选项卡更改

以编程方式在ios中定义自定义关键字

使用没有alertView的UIWebView在iOS中以编程方式进行电话呼叫

故事板中的PresentModalViewController以编程方式iOS 5

Xamarin表单(ios):以编程方式连接到wifi时的Runtimeexception

如何在IOS中以编程方式滚动UICollectionViewCell?