我正在使用 Angular4 创建一个应用程序,在该应用程序中,我需要使用选项卡内的按钮单击事件在选项卡之间导航。Primeng 数据表单击事件导航到另一个选项卡。
tabsSample.html
<md-tab-group class="custom-tab helper-top-margin" (selectedIndexChange)="selectedIndexChange($event)" [selectedIndex]="selectedIndex">
<md-tab>
<tab1></tab1>
</md-tab>
<md-tab>
<span>
<p-tabView orientation="left" class="custom-vertical-tab">
<p-tabPanel header="Tab 2" [selected]="true">
<tab2></tab2>
</p-tabPanel>
<p-tabPanel header="Tab 3">
<tab3></tab3>
</p-tabPanel>
</p-tabView>
</span>
</md-tab>
</md-tab-group>
零件
@Component({
selector: 'tabs-sample',
templateUrl: './tabsSample.html',
})
export class TabsSample {
selectedIndex: number = 0;
}
tab1.html
<p-dataTable [value]="cars" selectionMode="single" [responsive]="true" class="fixed-datatable-width small-text">
<p-column header="">
<ng-template let-car="rowData" pTemplate="body">
<a (click)="clickMe(car)" md-suffix class="helper-search-icon datatable-primary-icon">
<md-icon>search</md-icon>
</a>
</ng-template>
</p-column>
</p-dataTable>
@Component({
selector: 'tab1',
templateUrl: './tab1.html',
})
export class Tab1 {
cars: Car[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
}
clickMe(event: any){
this.selectedIndex=event;
}
}