typescript md-tabs 使用代码转到 angular 2 材料设计中的选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42539272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
md-tabs Using code to goto a tab in angular 2 material design
提问by skid
I am using Angular2 to create an application i which i need to navigate between tabs using a button present inside the tabs.
我正在使用 Angular2 创建一个应用程序，我需要使用选项卡内的按钮在选项卡之间导航。
my html is as the following :
我的 html 如下：
<md-tab-group>
<md-tab label="one">
<button md-raised-button>Navigate to Two</button>
<button md-raised-button>Navigate to Three</button>
</md-tab label>
<md-tab label="two">
</md-tab label>
<md-tab label="three">
</md-tab label>
</md-tab-group>
So,when i click the navigate to three it should take me to the tab name three
所以，当我点击导航到三个它应该带我到选项卡名称三
I am using the Angular2 material design for this example can anyone know to solve this problem.
我在这个例子中使用了 Angular2 材料设计，任何人都知道可以解决这个问题。
Thanks in advance
提前致谢
回答by Aravind
This can be achieved using selectedIndexinput variable using the below code
这可以使用selectedIndex输入变量使用以下代码来实现
<md-tab-group [selectedIndex]="selectedIndex">
<md-tab label="Tab 1">Content 1
<button (click)="clickMe()"> click me to go to tab 2 </button>
</md-tab>
<md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>
and your typescript code will be
你的打字稿代码将是
@Component({
selector: 'tabs-sample',
templateUrl: './tabsSample.html',
})
export class TabsSample {
selectedIndex:number=0;
clickMe(){
this.selectedIndex=1;
}
}
Update 1: Based on comment.
更新 1：基于评论。
You can use the selectedIndexChangemethod to fix that error as below
您可以使用selectedIndexChange方法来修复该错误，如下所示
<md-tab-group (selectedIndexChange)="selectedIndexChange($event)"
[selectedIndex]="selectedIndex">
</md-tab-group>
and your code will have
你的代码将有
selectedIndexChange(val :number ){
this.selectedIndex=val;
}
Updated in the plunk as well.
也在 plunk 中更新。
回答by elmiomar
you want to use the Angular Router.
你想使用Angular Router。
try this:
试试这个：
in your html
在你的 html
<md-tab-group>
<md-tab label="one">
<button md-raised-button (click)="goToTwo()">Navigate to Two</button>
<button md-raised-button (click)="goToThree()">Navigate to Three</button>
</md-tab label>
</md-tab-group>
<router-outlet></router-outlet>
inside your component class
在您的组件类中
constructor(private router: Router) {}
goToTwo() {
this.router.navigate(['two'])
}
goToThree(){
this.router.navigate(['three'])
}
don't forget to import the Router in your component
不要忘记在您的组件中导入路由器
import { Router } from '@angular/router';
import { Router } from '@angular/router';
in your module
在你的模块中
import { RouterModule, Routes } from '@angular/router';
export const appRoutes: Routes = [
{ path: '',
redirectTo: '/two',
pathMatch: 'full'
},
{ path: 'two', component: TwoComponent,
},
{ path: 'three', component: ThreeComponent }
];
...
imports: [
...,
RouterModule.forRoot(appRoutes)
],
and of course create TwoComponentand ThreeComponent.
当然还有创建TwoComponent和ThreeComponent。
Hope this helps!
希望这可以帮助！
