0

我正在使用 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;
  }

}
4

0 回答 0