Question

当我们以编程方式更改md-tab selectedIndex时，我们如何关注md-tab第一个元素（例如输入）？

模板

<md-tab-group #tg>
    <md-tab label="Tab1">
       <button md-button (click)="nextTab(tg)">Goto tab 2</button>
    </md-tab>

    <md-tab label="Tab2">
       <md-form-field>
           <input id="_input1" mdInput #input1>
       </md-form-field>

       <md-form-field>
           <input id="_input2" mdInput #input2>
       </md-form-field>
    </md-tab>
<md-tab-group>

TS

@ViewChild('input1') vcInput1: any;

nextTab(tab: any): void {
   setTimeout(_=> {

       // tab changes to Tab2
       this.vcTg.selectedIndex = 1;

       // nothing happened
       this.vcInput1.nativeElement.focus();

      // null
      console.log(document.getElementById('_input1'))
   })
}

尽管搜索任何相关问题。我找不到合适的解释和解决方案。

Answer 1

将注意力集中在(selectChange) MdTabGroup事件中，并将input1作为ElementRef。这是代码：

在你的html模板中：

<md-tab-group #tg (selectChange)="tabSelectionChanged($event)">

并在您的ts代码中：

@ViewChild('input1') vcInput1: EleemntRef;

nextTab(): void {       
    // tab changes to Tab2
    this.vcTg.selectedIndex = 1;
}

tabSelectionChanged(event: MdTabChangeEvent){
    if(event.index === 1){
        this.vcInput1.nativeElement.focus(); 
    } 
}

链接到working demo。

Answer 2

使用（selectChange）事件来检测选择了哪个选项卡：

<强>打字稿：

@ViewChild('input1') vcInput1: any;
@ViewChild('input2') vcInput2: any;

nextTab(tab: any): void {
    console.log(tab)

if(tab.index==0) {
        // nothing happened
        this.vcInput1.nativeElement.focus();
    }
if(tab.index===1) {
        // nothing happened
        this.vcInput2.nativeElement.focus();
    }
    // null
}

HTML：

<md-tab-group (selectChange)="nextTab($event)" >
  <md-tab label="Tab 1">Content 1
  <input  #input1>

  </md-tab>
  <md-tab label="Tab 2">Content 2
    <input #input2 >

  </md-tab>
</md-tab-group>

DEMO

以编程方式聚焦所选md-tab的第一个元素

2 个答案: