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

fix(angular): adds tabs stack

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-11-14 19:10:27 +01:00
committed by Manu MA
parent d9172b7d68
commit adae8d4ad1
9 changed files with 68 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/tabs/readme.md
View File

@@ -87,6 +87,13 @@ Using tabs with Angular's router is fairly straight forward. The only additional
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ----------- | --------- | ------- |
| `useRouter` | `use-router` | | `boolean` | `false` |
## Events
| Event | Description | Detail |

12
core/src/components/tabs/tabs.tsx
View File

@@ -11,7 +11,6 @@ export class Tabs implements NavOutlet {
private transitioning = false;
private leavingTab?: HTMLIonTabElement;
private useRouter = false;
@Element() el!: HTMLStencilElement;
@@ -21,6 +20,9 @@ export class Tabs implements NavOutlet {
@Prop({ context: 'config' }) config!: Config;
@Prop({ context: 'document' }) doc!: Document;
/** @internal */
@Prop({ mutable: true }) useRouter = false;
/**
* Emitted when the tab changes.
*/
@@ -42,7 +44,9 @@ export class Tabs implements NavOutlet {
@Event() ionNavDidChange!: EventEmitter<void>;
async componentWillLoad() {
this.useRouter = !!this.doc.querySelector('ion-router') && !this.el.closest('[no-router]');
if (!this.useRouter) {
this.useRouter = !!this.doc.querySelector('ion-router') && !this.el.closest('[no-router]');
}
this.tabs = Array.from(this.el.querySelectorAll('ion-tab'));
this.ionNavWillLoad.emit();
this.componentWillUpdate();
@@ -69,9 +73,9 @@ export class Tabs implements NavOutlet {
protected onTabClicked(ev: CustomEvent<TabButtonClickDetail>) {
const { href, tab } = ev.detail;
const selectedTab = this.tabs.find(t => t.tab === tab);
if (this.useRouter && href !== undefined) {
if (this.useRouter) {
const router = this.doc.querySelector('ion-router');
if (router) {
if (router && href !== undefined) {
router.push(href);
}
} else if (selectedTab) {