javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tabs): angular, fire willChange event before selected tab changes (#24910)

Browse Source 
Co-authored-by: Sean Perkins <sean@ionic.io>
This commit is contained in:
Amanda Smith
2022-03-09 14:34:51 -06:00
committed by GitHub
parent 3e7dfd5f73
commit d5efa11331
5 changed files with 80 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
angular/src/directives/navigation/ion-tabs.ts
View File

@ -57,10 +57,10 @@ export class IonTabs {
onPageSelected(detail: StackEvent): void {
const stackId = detail.enteringView.stackId;
if (detail.tabSwitch && stackId !== undefined) {
this.ionTabsWillChange.emit({ tab: stackId });
if (this.tabBar) {
this.tabBar.selectedTab = stackId;
}
this.ionTabsWillChange.emit({ tab: stackId });
this.ionTabsDidChange.emit({ tab: stackId });
}
}

24
angular/test/test-app/e2e/src/tabs.spec.ts
View File

@ -19,6 +19,30 @@ describe('Tabs', () => {
tab.find('.segment-changed').should('have.text', 'false');
});
describe('when navigating between tabs', () => {
it('should emit ionTabsWillChange before setting the selected tab', () => {
cy.get('#ionTabsWillChangeCounter').should('have.text', '1');
cy.get('#ionTabsWillChangeEvent').should('have.text', 'account');
cy.get('#ionTabsWillChangeSelectedTab').should('have.text', '');
cy.get('#ionTabsDidChangeCounter').should('have.text', '1');
cy.get('#ionTabsDidChangeEvent').should('have.text', 'account');
cy.get('#ionTabsDidChangeSelectedTab').should('have.text', 'account');
cy.get('#tab-button-contact').click();
cy.get('#ionTabsWillChangeCounter').should('have.text', '2');
cy.get('#ionTabsWillChangeEvent').should('have.text', 'contact');
cy.get('#ionTabsWillChangeSelectedTab').should('have.text', 'account');
cy.get('#ionTabsDidChangeCounter').should('have.text', '2');
cy.get('#ionTabsDidChangeEvent').should('have.text', 'contact');
cy.get('#ionTabsDidChangeSelectedTab').should('have.text', 'contact');
})
});
it('should simulate stack + double tab click', () => {
let tab = getSelectedTab();
tab.find('#goto-tab1-page2').click();

5
angular/test/test-app/src/app/tabs/tabs.component.css Normal file
View File

@ -0,0 +1,5 @@
#test {
position: absolute;
bottom: 100px;
left: 0;
}

28
angular/test/test-app/src/app/tabs/tabs.component.html
View File

@ -1,4 +1,4 @@
<ion-tabs (ionTabsDidChange)="tabChanged($event)">
<ion-tabs (ionTabsDidChange)="tabChanged($event)" (ionTabsWillChange)="tabsWillChange($event)">
<ion-tab-bar>
<ion-tab-button tab="account">
<ion-label>Tab One</ion-label>
@ -18,5 +18,29 @@
</ion-tab-bar>
</ion-tabs>
<ion-fab horizontal="end" vertical="top">
<ion-fab-button id="tabs-state" style="width: 100px;">{{tabCounter}}.{{tabEvent}}</ion-fab-button>
<ion-fab-button id="tabs-state" style="width: 100px;">{{tabsDidChangeCounter}}.{{tabsDidChangeEvent}}</ion-fab-button>
</ion-fab>
<div id="test">
<ul>
<li>
ionTabsWillChange counter: <span id="ionTabsWillChangeCounter">{{ tabsWillChangeCounter }}</span>
</li>
<li>
ionTabsWillChange event: <span id="ionTabsWillChangeEvent">{{ tabsWillChangeEvent }}</span>
</li>
<li>
ionTabsWillChange selectedTab: <span id="ionTabsWillChangeSelectedTab">{{ tabsWillChangeSelectedTab }}</span>
</li>
</ul>
<ul>
<li>
ionTabsDidChange counter: <span id="ionTabsDidChangeCounter">{{ tabsDidChangeCounter }}</span>
</li>
<li>
ionTabsDidChange event: <span id="ionTabsDidChangeEvent">{{ tabsDidChangeEvent }}</span>
</li>
<li>
ionTabsDidChange selectedTab: <span id="ionTabsDidChangeSelectedTab">{{ tabsDidChangeSelectedTab }}</span>
</li>
</ul>
</div>

28
angular/test/test-app/src/app/tabs/tabs.component.ts
View File

@ -1,15 +1,33 @@
import { Component } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { IonTabBar } from '@ionic/angular';
@Component({
selector: 'app-tabs',
templateUrl: './tabs.component.html',
styleUrls: ['./tabs.component.css']
})
export class TabsComponent {
tabCounter = 0;
tabEvent = '';
tabsDidChangeCounter = 0;
tabsDidChangeEvent = '';
tabsDidChangeSelectedTab = '';
tabsWillChangeCounter = 0;
tabsWillChangeEvent = '';
tabsWillChangeSelectedTab = '';
@ViewChild(IonTabBar) tabBar: IonTabBar;
tabChanged(ev: { tab: string }) {
this.tabCounter++;
this.tabEvent = ev.tab;
console.log('ionTabsDidChange', this.tabBar.selectedTab);
this.tabsDidChangeCounter++;
this.tabsDidChangeEvent = ev.tab;
this.tabsDidChangeSelectedTab = this.tabBar.selectedTab;
}
tabsWillChange(ev: { tab: string }) {
console.log('ionTabsWillChange', this.tabBar.selectedTab);
this.tabsWillChangeCounter++;
this.tabsWillChangeEvent = ev.tab;
this.tabsWillChangeSelectedTab = this.tabBar.selectedTab;
}
}