From 3c801dbe115fe02e2acf99fc71d5d99dda12561f Mon Sep 17 00:00:00 2001 From: Manu MA Date: Mon, 14 Jan 2019 18:03:44 +0100 Subject: [PATCH] feat(angular): expose getSelected() (#17079) fixes #17068 --- .../directives/navigation/ion-back-button.ts | 15 +++---- angular/src/directives/navigation/ion-tabs.ts | 7 +++ .../navigation/router-link-delegate.ts | 3 ++ core/api.txt | 2 +- core/src/components.d.ts | 4 +- core/src/components/tab/tab.tsx | 10 +++-- core/src/components/tabs/readme.md | 6 +-- core/src/components/tabs/tabs.tsx | 44 ++++++++++--------- 8 files changed, 52 insertions(+), 39 deletions(-) diff --git a/angular/src/directives/navigation/ion-back-button.ts b/angular/src/directives/navigation/ion-back-button.ts index b10fd6ef24..1ab072056a 100644 --- a/angular/src/directives/navigation/ion-back-button.ts +++ b/angular/src/directives/navigation/ion-back-button.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, HostListener, Optional } from '@angular/core'; +import { Directive, HostListener, Optional } from '@angular/core'; import { NavController } from '../../providers/nav-controller'; @@ -10,19 +10,16 @@ import { IonRouterOutlet } from './ion-router-outlet'; }) export class IonBackButtonDelegate { - set defaultHref(value: string | undefined | null) { - this.elementRef.nativeElement.defaultHref = value; - } - get defaultHref(): string | undefined | null { - return this.elementRef.nativeElement.defaultHref; - } + defaultHref: string | undefined | null; constructor( @Optional() private routerOutlet: IonRouterOutlet, - private navCtrl: NavController, - private elementRef: ElementRef, + private navCtrl: NavController ) {} + /** + * @internal + */ @HostListener('click', ['$event']) onClick(ev: Event) { if (this.routerOutlet && this.routerOutlet.canGoBack()) { diff --git a/angular/src/directives/navigation/ion-tabs.ts b/angular/src/directives/navigation/ion-tabs.ts index 99d3372fcd..052686b1c7 100644 --- a/angular/src/directives/navigation/ion-tabs.ts +++ b/angular/src/directives/navigation/ion-tabs.ts @@ -49,6 +49,9 @@ export class IonTabs { private navCtrl: NavController, ) {} + /** + * @internal + */ @HostListener('ionRouterOutletActivated', ['$event.detail']) onPageSelected(detail: {view: RouteView}) { if (this.tabBar) { @@ -69,4 +72,8 @@ export class IonTabs { animationDirection: 'back' }); } + + getSelected(): string | undefined { + return this.outlet.getActiveStackId(); + } } diff --git a/angular/src/directives/navigation/router-link-delegate.ts b/angular/src/directives/navigation/router-link-delegate.ts index 632202441d..b3c73c7bb7 100644 --- a/angular/src/directives/navigation/router-link-delegate.ts +++ b/angular/src/directives/navigation/router-link-delegate.ts @@ -45,6 +45,9 @@ export class RouterLinkDelegate { } } + /** + * @internal + */ @HostListener('click', ['$event']) onClick(ev: UIEvent) { this.navCtrl.setDirection(this.routerDirection); diff --git a/core/api.txt b/core/api.txt index 8ea6fdc9d0..c94d1dbdd7 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1063,7 +1063,7 @@ ion-tab,prop,tab,string,undefined,true,false ion-tab,method,setActive,setActive() => Promise ion-tabs,shadow -ion-tabs,method,getSelected,getSelected() => Promise +ion-tabs,method,getSelected,getSelected() => Promise ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise ion-tabs,event,ionChange,{tab: HTMLIonTabElement},true diff --git a/core/src/components.d.ts b/core/src/components.d.ts index fe896a5295..d6c10afb9f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -4457,9 +4457,9 @@ export namespace Components { /** * Get the currently selected tab */ - 'getSelected': () => Promise; + 'getSelected': () => Promise; /** - * Get the tab at the given index + * Get the tab element given the tab name */ 'getTab': (tab: string | HTMLIonTabElement) => Promise; /** diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx index 81c8015b92..1d8b740198 100644 --- a/core/src/components/tab/tab.tsx +++ b/core/src/components/tab/tab.tsx @@ -49,12 +49,16 @@ export class Tab implements ComponentInterface { this.active = true; } - private prepareLazyLoaded(): Promise { + private async prepareLazyLoaded(): Promise { if (!this.loaded && this.component != null) { this.loaded = true; - return attachComponent(this.delegate, this.el, this.component, ['ion-page']); + try { + return attachComponent(this.delegate, this.el, this.component, ['ion-page']); + } catch (e) { + console.error(e); + } } - return Promise.resolve(); + return undefined; } hostData() { diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md index 1e7e6d7cbc..9043701304 100644 --- a/core/src/components/tabs/readme.md +++ b/core/src/components/tabs/readme.md @@ -176,19 +176,19 @@ Using tabs with Angular's router is fairly straight forward. Here you only need ## Methods -### `getSelected() => Promise` +### `getSelected() => Promise` Get the currently selected tab #### Returns -Type: `Promise` +Type: `Promise` ### `getTab(tab: string | HTMLIonTabElement) => Promise` -Get the tab at the given index +Get the tab element given the tab name #### Parameters diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx index 122ffd96ee..269a5970eb 100644 --- a/core/src/components/tabs/tabs.tsx +++ b/core/src/components/tabs/tabs.tsx @@ -99,6 +99,29 @@ export class Tabs implements NavOutlet { return true; } + /** + * Get the tab element given the tab name + */ + @Method() + async getTab(tab: string | HTMLIonTabElement): Promise { + const tabEl = (typeof tab === 'string') + ? this.tabs.find(t => t.tab === tab) + : tab; + + if (!tabEl) { + console.error(`tab with id: "${tabEl}" does not exist`); + } + return tabEl; + } + + /** + * Get the currently selected tab + */ + @Method() + getSelected(): Promise { + return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined); + } + /** @internal */ @Method() async setRouteId(id: string): Promise { @@ -122,27 +145,6 @@ export class Tabs implements NavOutlet { return tabId !== undefined ? { id: tabId, element: this.selectedTab } : undefined; } - /** Get the tab at the given index */ - @Method() - async getTab(tab: string | HTMLIonTabElement): Promise { - const tabEl = (typeof tab === 'string') - ? this.tabs.find(t => t.tab === tab) - : tab; - - if (!tabEl) { - console.error(`tab with id: "${tabEl}" does not exist`); - } - return tabEl; - } - - /** - * Get the currently selected tab - */ - @Method() - getSelected(): Promise { - return Promise.resolve(this.selectedTab); - } - private async initSelect(): Promise { if (this.useRouter) { return;