Как переключаться между md-вкладками и динамически выбирать конкретную после Submit?

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 Вкладка активирована / выбрана по умолчанию. Но когда пользователь переключается на регистр-вкладку и отправляет форму регистрации, которая работает нормально, тогда я хотел бы переключиться на signin вкладка и сделать его выбранным. Означает, что пользователь может войти после регистрации - что имеет смысл.

Проблема в том, что мне не удается переместить и выбрать / активировать 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>

Я попробовал пару идей, но, к сожалению, ни одна из них не дала мне ожидаемого результата.

Любая подсказка или идея, пожалуйста?

Answer 1

Сначала вам нужно создать сервис 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();
   }
}

Answer 2

md-tab-group имеет selectedIndex имущество. Примерно так должно работать:

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