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

refactor(nav): make sure root is being watched and setRoot called when it changes

Browse Source
This commit is contained in:
Dan Bucholtz
2018-01-10 12:42:54 -06:00
parent 159cc3332a
commit 4be836f565
2 changed files with 120 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/core/src/components/nav/nav.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
import {
Animation,
AnimationController,
@ -103,10 +103,19 @@ export class Nav implements PublicNav, NavContainer {
}
this.init = true;
if (!this.useRouter) {
console.log('componentDidLoadImpl: ', this.root);
componentDidLoadImpl(this);
}
}
@Watch('root')
updateRootComponent(): any {
console.log('updateRootComponent: ', this.root);
if (this.init) {
return this.setRoot(this.root);
}
}
getViews(): PublicViewController[] {
return getViews(this);
}

110
packages/core/src/components/nav/test/set-root/index.html Normal file
View File

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body onload="initiaize()">
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
</body>
<script>
class PageOne extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page One</h1>
<ion-button class="next">Go to Page Two</ion-button>
</ion-content>
</ion-page>`;
const button = this.querySelector('ion-button');
button.addEventListener('click', async () => {
this.closest('ion-nav').push('page-two');
});
}
}
class PageTwo extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Two</h1>
<ion-button class="next">Go to Page Three</ion-button>
<ion-button class="previous">Go Back</ion-button>
</ion-content>
</ion-page>`;
const previousButton = this.querySelector('ion-button.previous');
previousButton.addEventListener('click', async () => {
await this.closest('ion-nav').pop();
});
const nextButton = this.querySelector('ion-button.next');
nextButton.addEventListener('click', async () => {
await this.closest('ion-nav').push('page-three');
});
}
}
class PageThree extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Three</h1>
<ion-button class="previous">Go Back</ion-button>
</ion-content>
</ion-page>`;
const previousButton = this.querySelector('ion-button.previous');
previousButton.addEventListener('click', async () => {
await this.closest('ion-nav').pop();
});
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
async function initiaize() {
const nav = document.querySelector('ion-nav');
await nav.componentOnReady();
nav.root = 'page-one';
setInterval(() => {
if (nav.root === 'page-one') {
nav.root = 'page-two';
} else if ( nav.root === 'page-two') {
nav.root = 'page-three';
} else {
nav.root = 'page-one';
}
}, 1000);
}
</script>
</html>