如何在md-tabs之间切换并在提交后动态选择特定的一个？使用<code>md-tab-group</code>索引页面，在这里我有两个标签，并且每个标签都有自己的组件

我' - signin.component和register.component：如何在md-tabs之间切换并在提交后动态选择特定的一个？使用<code>md-tab-group</code>索引页面，在这里我有两个标签，并且每个标签都有自己的组件

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

我试着夫妇的想法，但遗憾的是他们没有给我预期的结果。

任何提示或想法请吗？

来源

2017-08-09 k.vincent

首先你需要创建一个名为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>

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

在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-09 12:17:32

没有帮助......这是我没有尝试之前的选项之一。关键是我必须在register.component.ts中添加'currentSelectedIndex'属性，因为注册表的格式是：'register.component.html'，但是：'mg-tab-group'被嵌入'signin .component.html'，它由'signin.component.ts'控制。用例：我必须更改'signin.component.ts'中的selectedIndex来自：'register.component.ts' –

我明白这个问题，我更新了代码。 :) –

太好了。服务选项执行了修复。工作正常。应该改变一件事：改为'this.currentSelectedIndex = signInIndex;'应该是：'this.currentSelectedIndex = this.signInIndex;' –

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

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

来源

2017-08-09 12:15:56

如何在md-tabs之间切换并在提交后动态选择特定的一个？使用<code>md-tab-group</code>索引页面，在这里我有两个标签，并且每个标签都有自己的组件

回答

相关问题