0

我在一个索引页面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>

我尝试了几个想法，但不幸的是，它们都没有给我预期的结果。

请问有什么提示或想法吗？

4

2 回答 2

1

at first you need to create a service called SwitchTabService to achive communication between components.

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

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

add that service to the app.module.ts providers

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

you can use the two-way data-binding as follows:
signIn.component.html file

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

and inside the signIn.component.ts file

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.
  }
}

in the 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();
   }
}
于 2017-08-09T12:17:32.140 回答
0

md-tab-group有财产selectedIndex。像这样的东西应该工作：

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

于 2017-08-09T12:15:56.057 回答