Как имитировать нажатие на ion-tab

Я разработал элемент на главной странице своего приложения, который при нажатии меняет активную вкладку.

Раньше я делал следующее:

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

Как я могу вызвать функцию щелчка вкладки?


angular ionic3 viewchild ionic2 ionic-tabs
person Manuel RODRIGUEZ    schedule 26.09.2017    source источник
comment
дикая догадка: this.findTab.nativeElement.click(); Другой способ узнать это - использовать devtool в вашем браузере, сломать код в console.log и поиграть с элементом findTab в вашей консоли, пока не найдете решение   -  person methgaard    schedule 26.09.2017

Ответы (2)


arrow_upward
0
arrow_downward

Взгляните на этот планкр: 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 {}
person methgaard    schedule 26.09.2017

arrow_upward
0
arrow_downward

Я решил пойти по этому пути, так как меня рекомендовали на GitHub:

document.getElementById(tabid).click();
person Manuel RODRIGUEZ    schedule 28.09.2017