使用Angular4(Primeng数据表)从Click事件的特定选项卡转到另一个选项卡

时间:2017-05-05 06:50:32

标签: angular webpack-2 typescript2.2 primeng-datatable

我正在使用Angular4创建一个应用程序,我需要使用tab中的按钮单击事件在标签之间导航.Primeng Datatable点击事件导航到另一个标签。

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

}

0 个答案:

没有答案