如何在提交后动态切换 md-tabs 和 select 特定的？

Question

我在索引页 md-tab-group 中使用，其中我有两个选项卡，每个选项卡都有自己的组件 - signin.component 和 register.component:

<md-tab-group>
   <md-tab label="signin"></md-tab>
   <md-tab label="register"></md-tab>
<md-tab-group>

通过加载页面，signin 选项卡默认为 activated/selected。但是当用户切换到注册选项卡并提交注册表时，它工作正常，然后我想切换到 signin 选项卡并选中它。意味着用户可以在注册后登录 - 这是有道理的。

问题是我无法在注册后移动 select/activate signin 选项卡。 register 选项卡保持选中状态，这会使用户感到困惑。

<md-tab-group> 直接嵌入 signin.component.html 中，单击注册选项卡时通过路由器加载注册表格：

<md-tab-group #tabGroup>
     <md-tab label="signin">
         <form>
            <input....>
         </form>
     </md-tab>
     <md-tab label="regsiter">
         <router-outlet name="register"></router-outlet>
     </md-tab>
</md-tab-grou>

我尝试了几个想法，但不幸的是 none 给了我预期的结果。

有什么提示或想法吗？

Answer 1

md-tab-group 有 selectedIndex 属性。这样的事情应该有效：

<md-tab-group [selectedIndex]="myPosition" #tabGroup>

Answer 2

首先您需要创建一个名为 SwitchTabService 的服务来实现组件之间的通信。

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class SwitchTabService{
   public onRegisterFinish = new EventEmitter();
}

将该服务添加到 app.module.ts 个提供商

...
providers: [
   ...
   SwitchTabService
   ...
]
...

您可以按如下方式使用双向数据绑定：
signIn.component.html 文件

<md-tab-group [(selectedIndex)]='currentSelectedIndex'>
   <md-tab label="signin"></md-tab>
   <md-tab label="register"></md-tab>
<md-tab-group>

并在 signIn.component.ts 文件中

import {Component, OnInit} from '@angular/core';
import { SwitchTabService } from '??';    

@Component({
  ...
})
export class SignInComponent implements OnInit{
  currentSelectedIndex;
  signInIndex = 0; // assuming the index of signIn tab is 0 or the first

  constructor(private switchTabService: SwitchTabService) {}      

  ngOnInit() {
     this.switchTabService.onRegisterFinish.subscribe( () => {
        this.onRegisterFinished();
     });
  }      

  onRegisterFinished() {
     this.currentSelectedIndex = this.signInIndex;
     // this will change the selected tab to signIn tab.
  }
}

在register.component

import {Component, EventEmitter} from '@angular/core';
import { SwitchTabService } from '??';    

@Component({
  ...
})
export class RegisterComponent{

  constructor( private switchTabService: SwitchTabService) {}       

   onSubmitForm() {
     // you submit Logic
     this.switchTabService.onRegisterFinish.emit();
   }
}

如何在提交后动态切换 md-tabs 和 select 特定的？

How to switch between md-tabs and select a specific one dynamically after Submit?

angular

angular-material2

angular-components

angular-component-router