如何模擬離子選項卡上的點擊

我在應用程序的主頁上設計了一個元素，單擊它時會更改活動選項卡。如何模擬離子選項卡上的點擊

我曾經做到以下幾點：

events.subscribe('change-tab', (tab, filterOnSport) => { 
     console.log('TabsPage#constructor - change-tab event received with params: ', tab, filterOnSport); 
     if (filterOnSport) this.findTabParams.filterOnSport = filterOnSport; 
     this.tabs.select(tab); 
    });

但是，這並不工作的第一次，如果說片從未被訪問過（見https://github.com/ionic-team/ionic/issues/12592）

我在Github上看到問題是有人建議模擬點擊標籤。

我想用ViewChild這樣做，但無法設法使其工作。

// View 
<ion-tabs #tabs> 
    <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab> 
    <ion-tab #findTab [root]="tab2Root" [rootParams]="findTabParams" tabIcon="search"></ion-tab> 
    <ion-tab [root]="tab3Root" tabIcon="chatbubbles" [tabBadge]="unread?1:null" [tabsHideOnSubPages]=true></ion-tab> 
    <!--<ion-tab [root]="tab3Root" tabIcon="chatbubbles" [tabBadge]="totalUnreadMessages?.$value" [tabsHideOnSubPages]=true></ion-tab>--> 
</ion-tabs> 

// Controller 
@ViewChild('findTab') findTab: ElementRef; 
... 
ngAfterViewInit() { 
    console.log('TAB elem ', this.findTab); 
    // How click the tab ? 
    }

如何觸發標籤的點擊功能？

來源

2017-09-26 Manuel RODRIGUEZ

野生的猜測是：'this.findTab.nativeElement .click（）;'另一種查找方法是在你的瀏覽器中使用devtool，在console.log中打破你的代碼，並在你的控制檯中使用findTab元素，直到找到解決方案 – methgaard

看看這個plunkr：https://plnkr.co/edit/KBWa5YbFCYYVQI97ACRQ?p=preview

//our root app component 
import {Component, NgModule, VERSION, ViewChild} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <button #btn (click)="testClick()">hello</button> 
    </div> 
    `, 
}) 
export class App implements AfterViewInit { 
    @ViewChild('btn') myBtn; 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 

    testClick(){ 
    window.alert("i have been clicked!") 
    } 

    ngAfterViewInit(){ 
    this.myBtn.nativeElement.click(); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}

來源

2017-09-26 10:46:11 methgaard

我決定走這條路，因爲我已建議在GitHub上：

document.getElementById(tabid).click();

來源

2017-09-28 10:08:58

如何模擬離子選項卡上的點擊

回答

相關問題