mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
refactor(nav): implement nav integration with external router (angular to start)
This commit is contained in:
@ -14,12 +14,15 @@ const routes: Routes = [
|
||||
{ path: 'content', loadChildren: 'app/content/content.module#ContentModule' },
|
||||
{ path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
|
||||
{ path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' },
|
||||
{ path: 'no-routing-nav', loadChildren: 'app/no-routing-nav/no-routing-nav.module#NoRoutingNavModule' },
|
||||
{ path: 'modal', loadChildren: 'app/modal/modal.module#ModalModule' },
|
||||
{ path: 'popover', loadChildren: 'app/popover/popover.module#PopoverModule' },
|
||||
{ path: 'segment', loadChildren: 'app/segment/segment.module#SegmentModule' },
|
||||
{ path: 'virtual-scroll', loadChildren: 'app/virtual-scroll/virtual-scroll.module#VirtualScrollModule' },
|
||||
|
||||
{ path: 'no-routing-nav', loadChildren: 'app/no-routing-nav/no-routing-nav.module#NoRoutingNavModule' },
|
||||
{ path: 'simple-nav', loadChildren: 'app/simple-nav/simple-nav.module#SimpleNavModule' },
|
||||
{ path: 'nested-nav', loadChildren: 'app/nested-nav/nested-nav.module#NestedNavModule' },
|
||||
{ path: 'nav-then-tabs', loadChildren: 'app/nav-then-tabs/nav-then-tabs.module#NavThenTabsModule' },
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
@ -51,5 +51,19 @@
|
||||
|
||||
<div>
|
||||
<h2>Nav Tests</h2>
|
||||
<a href='no-routing-nav'>No Routing</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href='no-routing-nav'>No Routing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='simple-nav/page-one'>Simple Nav</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='nested-nav/nested-page-one'>Nested Nav</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='nav-then-tabs/login'>Nav Then Tabs</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { LoginPage } from './login';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: LoginPage}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class LoginRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { LoginPage } from './login';
|
||||
import { LoginRoutingModule } from './login-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
LoginRoutingModule
|
||||
],
|
||||
declarations: [LoginPage],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class LoginModule { }
|
38
packages/demos/angular/src/app/nav-then-tabs/login/login.ts
Normal file
38
packages/demos/angular/src/app/nav-then-tabs/login/login.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'login',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Login Page</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Login - {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="pushPageTwoComponent()">Login to app</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class LoginPage {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
pushPageTwoComponent() {
|
||||
this.navController.push('/nav-then-tabs/app/tabs/(tab-one:one)');
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
@ -0,0 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { NavThenTabsPageComponent } from './nav-then-tabs.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: NavThenTabsPageComponent,
|
||||
children: [
|
||||
{ path: 'login', loadChildren: './login/login.module#LoginModule' },
|
||||
{ path: 'app', loadChildren: './tabs-page/tabs-page.module#TabsPageModule' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class NavThenTabsRoutingModule { }
|
@ -0,0 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-nav></ion-nav>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
export class NavThenTabsPageComponent {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,21 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
|
||||
import { NavThenTabsPageComponent } from './nav-then-tabs.component';
|
||||
import { NavThenTabsRoutingModule } from './nav-then-tabs-routing.module';
|
||||
|
||||
import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavThenTabsPageComponent,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
IonicAngularModule,
|
||||
IonicRouterModule,
|
||||
NavThenTabsRoutingModule
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class NavThenTabsModule {}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TabOnePageOne } from './tab-one-page-one';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: TabOnePageOne}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TabOnePageOneRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { TabOnePageOne } from './tab-one-page-one';
|
||||
import { TabOnePageOneRoutingModule } from './tab-one-page-one-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TabOnePageOneRoutingModule
|
||||
],
|
||||
declarations: [TabOnePageOne],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class TabOnePageOneModule { }
|
@ -0,0 +1,34 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'tab-one-page-one',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab One Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Tab One Page One {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="next()">Go to Page Two</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class TabOnePageOne {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
next() {
|
||||
this.navController.push('/nav-then-tabs/app/tabs/(tab-one:two)');
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TabOnePageThree } from './tab-one-page-three';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: TabOnePageThree}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TabOnePageThreeRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { TabOnePageThree } from './tab-one-page-three';
|
||||
import { TabOnePageThreeRoutingModule } from './tab-one-page-three-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TabOnePageThreeRoutingModule
|
||||
],
|
||||
declarations: [TabOnePageThree],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class TabOnePageThreeModule { }
|
@ -0,0 +1,34 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'tab-one-page-three',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab One Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Tab One Page Three {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="back()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class TabOnePageThree {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
back() {
|
||||
this.navController.pop();
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TabOnePageTwo } from './tab-one-page-two';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: TabOnePageTwo}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TabOnePageTwoRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { TabOnePageTwo } from './tab-one-page-two';
|
||||
import { TabOnePageTwoRoutingModule } from './tab-one-page-two-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TabOnePageTwoRoutingModule
|
||||
],
|
||||
declarations: [TabOnePageTwo],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class TabOnePageTwoModule { }
|
@ -0,0 +1,41 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'tab-one-page-two',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab One Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Tab One Page Two {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="next()">Go to Page Three</ion-button>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button (click)="back()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class TabOnePageTwo {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
next() {
|
||||
this.navController.push('/nav-then-tabs/app/tabs/(tab-one:three)');
|
||||
}
|
||||
|
||||
back() {
|
||||
this.navController.pop();
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TabThreePageOne } from './tab-three-page-one';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: TabThreePageOne}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TabThreePageOneRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { TabThreePageOne } from './tab-three-page-one';
|
||||
import { TabThreePageOneRoutingModule } from './tab-three-page-one-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TabThreePageOneRoutingModule
|
||||
],
|
||||
declarations: [TabThreePageOne],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class TabThreePageOneModule { }
|
@ -0,0 +1,34 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'tab-three-page-one',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab Three Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Tab Three Page One {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="next()">Go to Page Two</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class TabThreePageOne {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
next() {
|
||||
this.navController.push('/nav-then-tabs/app/tabs/(tab-three:two)');
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TabThreePageThree } from './tab-three-page-three';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: TabThreePageThree}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TabThreePageThreeRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { TabThreePageThree } from './tab-three-page-three';
|
||||
import { TabThreePageThreeRoutingModule } from './tab-three-page-three-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TabThreePageThreeRoutingModule
|
||||
],
|
||||
declarations: [TabThreePageThree],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class TabThreePageThreeModule { }
|
@ -0,0 +1,34 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'tab-three-page-three',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab Three Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Tab Three Page Three {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="back()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class TabThreePageThree {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
back() {
|
||||
this.navController.pop();
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TabThreePageTwo } from './tab-three-page-two';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: TabThreePageTwo}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TabThreePageTwoRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { TabThreePageTwo } from './tab-three-page-two';
|
||||
import { TabThreePageTwoRoutingModule } from './tab-three-page-two-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TabThreePageTwoRoutingModule
|
||||
],
|
||||
declarations: [TabThreePageTwo],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class TabThreePageTwoModule { }
|
@ -0,0 +1,41 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'tab-three-page-two',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab Three Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Tab Three Page Two {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="next()">Go to Page Three</ion-button>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button (click)="back()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class TabThreePageTwo {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
next() {
|
||||
this.navController.push('/nav-then-tabs/app/tabs/(tab-three:three)');
|
||||
}
|
||||
|
||||
back() {
|
||||
this.navController.pop();
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TabTwoPageOne } from './tab-two-page-one';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: TabTwoPageOne}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TabTwoPageOneRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { TabTwoPageOne } from './tab-two-page-one';
|
||||
import { TabTwoPageOneRoutingModule } from './tab-two-page-one-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TabTwoPageOneRoutingModule
|
||||
],
|
||||
declarations: [TabTwoPageOne],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class TabTwoPageOneModule { }
|
@ -0,0 +1,34 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'tab-two-page-one',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab Two Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Tab Two Page One {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="next()">Go to Page Two</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class TabTwoPageOne {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
next() {
|
||||
this.navController.push('/nav-then-tabs/app/tabs/(tab-two:two)');
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TabTwoPageThree } from './tab-two-page-three';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: TabTwoPageThree}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TabTwoPageThreeRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { TabTwoPageThree } from './tab-two-page-three';
|
||||
import { TabTwoPageThreeRoutingModule } from './tab-two-page-three-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TabTwoPageThreeRoutingModule
|
||||
],
|
||||
declarations: [TabTwoPageThree],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class TabTwoPageThreeModule { }
|
@ -0,0 +1,34 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'tab-two-page-three',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab Two Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Tab Two Page Three {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="back()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class TabTwoPageThree {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
back() {
|
||||
this.navController.pop();
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TabTwoPageTwo } from './tab-two-page-two';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: TabTwoPageTwo}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TabTwoPageTwoRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { TabTwoPageTwo } from './tab-two-page-two';
|
||||
import { TabTwoPageTwoRoutingModule } from './tab-two-page-two-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TabTwoPageTwoRoutingModule
|
||||
],
|
||||
declarations: [TabTwoPageTwo],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class TabTwoPageTwoModule { }
|
@ -0,0 +1,41 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'tab-two-page-two',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab Two Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Tab Two Page Two {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="next()">Go to Page Three</ion-button>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button (click)="back()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class TabTwoPageTwo {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
next() {
|
||||
this.navController.push('/nav-then-tabs/app/tabs/(tab-two:three)');
|
||||
}
|
||||
|
||||
back() {
|
||||
this.navController.pop();
|
||||
}
|
||||
}
|
@ -0,0 +1,76 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TabsPage } from './tabs-page';
|
||||
|
||||
import { TabOnePageOne } from '../tab-one-page-one/tab-one-page-one';
|
||||
import { TabOnePageTwo } from '../tab-one-page-two/tab-one-page-two';
|
||||
import { TabOnePageThree } from '../tab-one-page-three/tab-one-page-three';
|
||||
|
||||
import { TabTwoPageOne } from '../tab-two-page-one/tab-two-page-one';
|
||||
import { TabTwoPageTwo } from '../tab-two-page-two/tab-two-page-two';
|
||||
import { TabTwoPageThree } from '../tab-two-page-three/tab-two-page-three';
|
||||
|
||||
import { TabThreePageOne } from '../tab-three-page-one/tab-three-page-one';
|
||||
import { TabThreePageTwo } from '../tab-three-page-two/tab-three-page-two';
|
||||
import { TabThreePageThree } from '../tab-three-page-three/tab-three-page-three';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: 'tabs',
|
||||
component: TabsPage,
|
||||
children: [
|
||||
{
|
||||
path: 'one',
|
||||
component: TabOnePageOne,
|
||||
outlet: 'tab-one'
|
||||
},
|
||||
{
|
||||
path: 'two',
|
||||
component: TabOnePageTwo,
|
||||
outlet: 'tab-one'
|
||||
},
|
||||
{
|
||||
path: 'three',
|
||||
component: TabOnePageThree,
|
||||
outlet: 'tab-one'
|
||||
},
|
||||
{
|
||||
path: 'one',
|
||||
component: TabTwoPageOne,
|
||||
outlet: 'tab-two'
|
||||
},
|
||||
{
|
||||
path: 'two',
|
||||
component: TabTwoPageTwo,
|
||||
outlet: 'tab-two'
|
||||
},
|
||||
{
|
||||
path: 'three',
|
||||
component: TabTwoPageThree,
|
||||
outlet: 'tab-two'
|
||||
},
|
||||
{
|
||||
path: 'one',
|
||||
component: TabThreePageOne,
|
||||
outlet: 'tab-three'
|
||||
},
|
||||
{
|
||||
path: 'two',
|
||||
component: TabThreePageTwo,
|
||||
outlet: 'tab-three'
|
||||
},
|
||||
{
|
||||
path: 'three',
|
||||
component: TabThreePageThree,
|
||||
outlet: 'tab-three'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TabsPageRoutingModule { }
|
@ -0,0 +1,52 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import {
|
||||
IonicAngularModule,
|
||||
IonicRouterModule
|
||||
} from '@ionic/angular';
|
||||
|
||||
import { TabsPage } from './tabs-page';
|
||||
|
||||
import { TabsPageRoutingModule } from './tabs-page-routing.module';
|
||||
|
||||
import { TabOnePageOneModule } from '../tab-one-page-one/tab-one-page-one.module';
|
||||
import { TabOnePageTwoModule } from '../tab-one-page-two/tab-one-page-two.module';
|
||||
import { TabOnePageThreeModule } from '../tab-one-page-three/tab-one-page-three.module';
|
||||
|
||||
import { TabTwoPageOneModule } from '../tab-two-page-one/tab-two-page-one.module';
|
||||
import { TabTwoPageTwoModule } from '../tab-two-page-two/tab-two-page-two.module';
|
||||
import { TabTwoPageThreeModule } from '../tab-two-page-three/tab-two-page-three.module';
|
||||
|
||||
import { TabThreePageOneModule } from '../tab-three-page-one/tab-three-page-one.module';
|
||||
import { TabThreePageTwoModule } from '../tab-three-page-two/tab-three-page-two.module';
|
||||
import { TabThreePageThreeModule } from '../tab-three-page-three/tab-three-page-three.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TabsPageRoutingModule,
|
||||
IonicAngularModule,
|
||||
IonicRouterModule,
|
||||
TabOnePageOneModule,
|
||||
TabOnePageTwoModule,
|
||||
TabOnePageThreeModule,
|
||||
|
||||
|
||||
TabTwoPageOneModule,
|
||||
TabTwoPageTwoModule,
|
||||
TabTwoPageThreeModule,
|
||||
|
||||
|
||||
TabThreePageOneModule,
|
||||
TabThreePageTwoModule,
|
||||
TabThreePageThreeModule
|
||||
],
|
||||
declarations: [
|
||||
TabsPage,
|
||||
],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class TabsPageModule { }
|
@ -0,0 +1,38 @@
|
||||
import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'tabs-page',
|
||||
template: `
|
||||
<ion-tabs>
|
||||
<ion-tab title="Tab One" icon="star" #tabOne>
|
||||
<ion-nav [root]="tabOnePageOne" name="tab-one" lazy="true"></ion-nav>
|
||||
</ion-tab>
|
||||
<ion-tab title="Tab Two" icon="globe" #tabTwo>
|
||||
<ion-nav [root]="tabTwoPageOne" name="tab-two" lazy="true"></ion-nav>
|
||||
</ion-tab>
|
||||
<ion-tab title="Tab Three" icon="logo-facebook" #tabThree>
|
||||
<ion-nav [root]="tabThreePageOne" name="tab-three" lazy="true"></ion-nav>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
`
|
||||
})
|
||||
export class TabsPage {
|
||||
|
||||
tabOnePageOne = '/nav-then-tabs/app/tabs/(tab-one:one)';
|
||||
tabTwoPageOne = '/nav-then-tabs/app/tabs/(tab-two:one)';
|
||||
tabThreePageOne = '/nav-then-tabs/app/tabs/(tab-three:one)';
|
||||
|
||||
@ViewChild('tabOne') tabOne: ElementRef;
|
||||
@ViewChild('tabTwo') tabTwo: ElementRef;
|
||||
@ViewChild('tabThree') tabThree: ElementRef;
|
||||
|
||||
constructor(private router: Router, private location: Location) {
|
||||
}
|
||||
|
||||
goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
}
|
@ -0,0 +1,22 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { NestedNavPageComponent } from './nested-nav.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: NestedNavPageComponent,
|
||||
children: [
|
||||
{ path: 'nested-page-one', loadChildren: './nested-page-one/page-one.module#PageOneModule' },
|
||||
{ path: 'nested-page-two', loadChildren: './nested-page-two/page-two.module#PageTwoModule' },
|
||||
{ path: 'nested-page-three', loadChildren: './nested-page-three/page-three.module#PageThreeModule' }
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class NestedNavRoutingModule { }
|
@ -0,0 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-nav></ion-nav>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
export class NestedNavPageComponent {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,21 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
|
||||
import { NestedNavPageComponent } from './nested-nav.component';
|
||||
import { NestedNavRoutingModule } from './nested-nav-routing.module';
|
||||
|
||||
import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NestedNavPageComponent,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
IonicAngularModule,
|
||||
IonicRouterModule,
|
||||
NestedNavRoutingModule
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class NestedNavModule {}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { PageOne } from './page-one';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: PageOne}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PageOneRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { PageOne } from './page-one';
|
||||
import { PageOneRoutingModule } from './page-one-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
PageOneRoutingModule
|
||||
],
|
||||
declarations: [PageOne],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class PageOneModule { }
|
@ -0,0 +1,36 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'page-one',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Nested Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page One - {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="pushPageTwoComponent()">Go to Page Two</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageOne {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
pushPageTwoComponent() {
|
||||
this.navController.push('/nested-nav/nested-page-two/section-one');
|
||||
}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { PageThree } from './page-three';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: PageThree }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PageThreeRoutingModule { }
|
@ -0,0 +1,19 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { PageThree } from './page-three';
|
||||
import { PageThreeRoutingModule } from './page-three-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
PageThreeRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
PageThree
|
||||
],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class PageThreeModule { }
|
@ -0,0 +1,39 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'page-three',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Three {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="navPop()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageThree {
|
||||
|
||||
ts: number;
|
||||
constructor(private router: Router, private location: Location) {
|
||||
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
navPop() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,29 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { PageTwo } from './page-two';
|
||||
import { PageTwoSectionOne } from './page-two-section-one';
|
||||
import { PageTwoSectionTwo } from './page-two-section-two';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: PageTwo,
|
||||
children: [
|
||||
{
|
||||
path: 'section-one',
|
||||
component: PageTwoSectionOne,
|
||||
},
|
||||
{
|
||||
path: 'section-two',
|
||||
component: PageTwoSectionTwo,
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PageTwoRoutingModule { }
|
@ -0,0 +1,43 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'page-two-section-one',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Two Section One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Two Section One - TS {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="pushPageTwoComponent()">Go to Section Two</ion-button>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button (click)="goBack()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageTwoSectionOne {
|
||||
|
||||
ts: number;
|
||||
|
||||
constructor(private router: Router) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
pushPageTwoComponent() {
|
||||
this.router.navigateByUrl('/nested-nav/nested-page-two/section-two');
|
||||
}
|
||||
|
||||
goBack() {
|
||||
this.router.navigateByUrl('/nested-nav/nested-page-one');
|
||||
}
|
||||
}
|
@ -0,0 +1,42 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'page-two-section-two',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Two Section Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Two Section Two {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="pushPageTwoComponent()">Go to Page Three</ion-button>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button (click)="goBack()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageTwoSectionTwo {
|
||||
|
||||
ts: number;
|
||||
constructor(private router: Router) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
pushPageTwoComponent() {
|
||||
this.router.navigateByUrl('/nested-nav/nested-page-three');
|
||||
}
|
||||
|
||||
goBack() {
|
||||
this.router.navigateByUrl('/nested-nav/nested-page-two/section-one');
|
||||
}
|
||||
}
|
@ -0,0 +1,32 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import {
|
||||
IonicAngularModule,
|
||||
IonicRouterModule
|
||||
} from '@ionic/angular';
|
||||
|
||||
import { PageTwo } from './page-two';
|
||||
import { PageTwoSectionOne } from './page-two-section-one';
|
||||
import { PageTwoSectionTwo } from './page-two-section-two';
|
||||
|
||||
import { PageTwoRoutingModule } from './page-two-routing.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
PageTwoRoutingModule,
|
||||
IonicAngularModule,
|
||||
IonicRouterModule
|
||||
],
|
||||
declarations: [
|
||||
PageTwo,
|
||||
PageTwoSectionOne,
|
||||
PageTwoSectionTwo
|
||||
],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class PageTwoModule { }
|
@ -0,0 +1,24 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'page-two',
|
||||
template: `
|
||||
<ion-nav></ion-nav>
|
||||
<!-- <router-outlet></router-outlet> -->
|
||||
`
|
||||
})
|
||||
export class PageTwo {
|
||||
|
||||
constructor(private navController: NavController) {
|
||||
}
|
||||
|
||||
pushPageThree() {
|
||||
this.navController.push('/nested-nav/nested-page-three');
|
||||
}
|
||||
|
||||
goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
}
|
@ -6,6 +6,9 @@ import { Component } from '@angular/core';
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
@ -8,6 +8,9 @@ import { PageThree } from './page-three';
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { PageOne } from './page-one';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: PageOne}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PageOneRoutingModule { }
|
@ -0,0 +1,17 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { PageOne } from './page-one';
|
||||
import { PageOneRoutingModule } from './page-one-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
PageOneRoutingModule
|
||||
],
|
||||
declarations: [PageOne],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class PageOneModule { }
|
@ -0,0 +1,40 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
import { PageTwo } from '../page-two/page-two';
|
||||
|
||||
@Component({
|
||||
selector: 'page-one',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Simple Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page One - {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="pushPageTwoComponent()">Go to Page Two</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageOne {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
pushPageTwoComponent() {
|
||||
this.navController.push('/simple-nav/page-two');
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { PageThree } from './page-three';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: PageThree }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PageThreeRoutingModule { }
|
@ -0,0 +1,19 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { PageThree } from './page-three';
|
||||
import { PageThreeRoutingModule } from './page-three-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
PageThreeRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
PageThree
|
||||
],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class PageThreeModule { }
|
@ -0,0 +1,37 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'page-three',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Three {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="navPop()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageThree {
|
||||
|
||||
ts: number;
|
||||
constructor(private navController: NavController) {
|
||||
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
navPop() {
|
||||
this.navController.pop();
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { PageTwo } from './page-two';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: PageTwo,
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PageTwoRoutingModule { }
|
@ -0,0 +1,27 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import {
|
||||
IonicAngularModule,
|
||||
IonicRouterModule
|
||||
} from '@ionic/angular';
|
||||
|
||||
import { PageTwo } from './page-two';
|
||||
import { PageTwoRoutingModule } from './page-two-routing.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
PageTwoRoutingModule,
|
||||
IonicAngularModule,
|
||||
IonicRouterModule
|
||||
],
|
||||
declarations: [
|
||||
PageTwo,
|
||||
],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA
|
||||
]
|
||||
})
|
||||
export class PageTwoModule { }
|
@ -0,0 +1,39 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'page-two',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Two - {{ts}}
|
||||
<div>
|
||||
<ion-button (click)="pushPageThreeComponent()">Go to Page Three</ion-button>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button (click)="goBack()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageTwo {
|
||||
|
||||
constructor(private navController: NavController) {
|
||||
}
|
||||
|
||||
pushPageThreeComponent() {
|
||||
this.navController.push('/simple-nav/page-three');
|
||||
}
|
||||
|
||||
goBack() {
|
||||
this.navController.pop();
|
||||
}
|
||||
}
|
@ -0,0 +1,22 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { SimpleNavPageComponent } from './simple-nav.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: SimpleNavPageComponent,
|
||||
children: [
|
||||
{ path: 'page-one', loadChildren: './page-one/page-one.module#PageOneModule' },
|
||||
{ path: 'page-two', loadChildren: './page-two/page-two.module#PageTwoModule' },
|
||||
{ path: 'page-three', loadChildren: './page-three/page-three.module#PageThreeModule' }
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class SimpleNavRoutingModule { }
|
@ -0,0 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-nav></ion-nav>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
export class SimpleNavPageComponent {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,21 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
|
||||
import { SimpleNavPageComponent } from './simple-nav.component';
|
||||
import { SimpleNavRoutingModule } from './simple-nav-routing.module';
|
||||
|
||||
import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
SimpleNavPageComponent,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
IonicAngularModule,
|
||||
IonicRouterModule,
|
||||
SimpleNavRoutingModule
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class SimpleNavModule {}
|
Reference in New Issue
Block a user