mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 03:00:58 +08:00
fix(demos): fixes angular
This commit is contained in:
Manu Mtz.-Almeida
@ -1,7 +1,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ModalOptions } from '@ionic/core';
|
||||
import { OverlayBaseController } from '../util/overlay';
|
||||
import { AngularDelegate } from '..';
|
||||
import { AngularDelegate } from './angular-delegate';
|
||||
|
||||
@Injectable()
|
||||
export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
export function proxyMethod(ctrlName: string, methodName: string, ...args: any[]) {
|
||||
const controller = ensureElementInBody(ctrlName);
|
||||
return controller.componentOnReady()
|
||||
.then(() => (controller as any)[methodName].apply(args));
|
||||
.then(() => (controller as any)[methodName].apply(controller, args));
|
||||
}
|
||||
|
||||
export function ensureElementInBody(elementName: string) {
|
||||
|
||||
@ -6,7 +6,6 @@ import { ActionSheetController } from '@ionic/angular';
|
||||
selector: 'app-action-sheet-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Test</ion-title>
|
||||
@ -15,7 +14,6 @@ import { ActionSheetController } from '@ionic/angular';
|
||||
<ion-content padding>
|
||||
<ion-button (click)="clickMe()">Open Basic ActionSheet</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
@ -25,8 +23,8 @@ export class ActionSheetPageComponent {
|
||||
|
||||
}
|
||||
|
||||
clickMe() {
|
||||
const actionSheet = this.actionSheetController.create({
|
||||
async clickMe() {
|
||||
const actionSheet = await this.actionSheetController.create({
|
||||
title: 'Albums',
|
||||
buttons: [{
|
||||
text: 'Delete',
|
||||
|
||||
@ -6,7 +6,6 @@ import { AlertController } from '@ionic/angular';
|
||||
selector: 'app-alert-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Test</ion-title>
|
||||
@ -15,18 +14,15 @@ import { AlertController } from '@ionic/angular';
|
||||
<ion-content padding>
|
||||
<ion-button (click)="clickMe()">Open Basic Alert</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
export class AlertPageComponent {
|
||||
|
||||
constructor(private alertController: AlertController) {
|
||||
constructor(private alertController: AlertController) {}
|
||||
|
||||
}
|
||||
|
||||
clickMe() {
|
||||
const alert = this.alertController.create({
|
||||
async clickMe() {
|
||||
const alert = await this.alertController.create({
|
||||
title: 'ohhhh snap',
|
||||
message: 'Ive been injected via Angular keeping the old api',
|
||||
buttons: [
|
||||
@ -45,14 +41,8 @@ export class AlertPageComponent {
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
});
|
||||
alert.present().then(() => {
|
||||
// return alert.dismiss();
|
||||
|
||||
}).then(() => {
|
||||
console.log('dismissed');
|
||||
});
|
||||
return alert.present();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -19,11 +19,6 @@ const routes: Routes = [
|
||||
{ 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({
|
||||
|
||||
@ -6,7 +6,7 @@ import { AppComponent } from './app.component';
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { PostTestService } from './post-test/post-test.service';
|
||||
|
||||
import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
|
||||
import { IonicAngularModule } from '@ionic/angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent],
|
||||
@ -15,7 +15,6 @@ import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
|
||||
BrowserModule,
|
||||
HttpClientModule,
|
||||
IonicAngularModule.forRoot(),
|
||||
IonicRouterModule.forRoot()
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
|
||||
@ -4,7 +4,6 @@ import { Component } from '@angular/core';
|
||||
selector: 'app-badge-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Badges</ion-title>
|
||||
@ -71,7 +70,6 @@ import { Component } from '@angular/core';
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
|
||||
@ -4,7 +4,6 @@ import { Component } from '@angular/core';
|
||||
selector: 'app-card-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Card</ion-title>
|
||||
@ -57,7 +56,6 @@ import { Component } from '@angular/core';
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
|
||||
@ -19,7 +19,6 @@ import { Component } from '@angular/core';
|
||||
],
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header #header>
|
||||
<ion-toolbar style="display: none" #toolbar>
|
||||
<ion-title>Hidden Toolbar</ion-title>
|
||||
@ -54,7 +53,6 @@ import { Component } from '@angular/core';
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<ion-app>
|
||||
<form #myForm="ngForm">
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Sample Form</ion-title>
|
||||
@ -85,6 +84,5 @@
|
||||
<ion-button expand="block" [disabled]="myForm.invalid" (click)="save(myForm.value)">
|
||||
<ion-icon name="save" slot="start"></ion-icon>Looks Good to Me</ion-button>
|
||||
</ion-footer>
|
||||
</ion-page>
|
||||
</form>
|
||||
</ion-app>
|
||||
|
||||
@ -6,7 +6,6 @@ import { LoadingController } from '@ionic/angular';
|
||||
selector: 'app-loading-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Test</ion-title>
|
||||
@ -15,7 +14,6 @@ import { LoadingController } from '@ionic/angular';
|
||||
<ion-content padding>
|
||||
<ion-button (click)="clickMe()">Open Basic Loading</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
@ -25,12 +23,12 @@ export class LoadingPageComponent {
|
||||
|
||||
}
|
||||
|
||||
clickMe() {
|
||||
const loading = this.loadingController.create({
|
||||
async clickMe() {
|
||||
const loading = await this.loadingController.create({
|
||||
duration: 1000,
|
||||
content: 'Ahem. Please wait.'
|
||||
});
|
||||
loading.present();
|
||||
return loading.present();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@ import { ModalController } from '@ionic/angular';
|
||||
@Component({
|
||||
selector: 'page-one',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page One</ion-title>
|
||||
@ -17,7 +16,6 @@ import { ModalController } from '@ionic/angular';
|
||||
</ul>
|
||||
<ion-button class="dismiss-btn" (click)="dismiss()">Close Modal</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
@ -7,7 +7,6 @@ import { ModalPageToPresent } from './modal-page-to-present';
|
||||
selector: 'app-modal-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Test</ion-title>
|
||||
@ -16,7 +15,6 @@ import { ModalPageToPresent } from './modal-page-to-present';
|
||||
<ion-content padding>
|
||||
<ion-button (click)="clickMe()">Open Basic Modal</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>,
|
||||
`,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
@ -26,8 +24,8 @@ export class ModalPageComponent {
|
||||
constructor(private modalController: ModalController) {
|
||||
}
|
||||
|
||||
clickMe() {
|
||||
const modal = this.modalController.create({
|
||||
async clickMe() {
|
||||
const modal = await this.modalController.create({
|
||||
component: ModalPageToPresent
|
||||
});
|
||||
return modal.present();
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,38 +0,0 @@
|
||||
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)');
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
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 { }
|
||||
@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-nav></ion-nav>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
export class NavThenTabsPageComponent {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
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 {}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,34 +0,0 @@
|
||||
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)');
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,34 +0,0 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,41 +0,0 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,34 +0,0 @@
|
||||
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)');
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,34 +0,0 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,41 +0,0 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,34 +0,0 @@
|
||||
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)');
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,34 +0,0 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,41 +0,0 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -1,76 +0,0 @@
|
||||
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 { }
|
||||
@ -1,52 +0,0 @@
|
||||
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 { }
|
||||
@ -1,38 +0,0 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
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 { }
|
||||
@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-nav></ion-nav>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
export class NestedNavPageComponent {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
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 {}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,36 +0,0 @@
|
||||
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');
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,19 +0,0 @@
|
||||
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 { }
|
||||
@ -1,39 +0,0 @@
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
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 { }
|
||||
@ -1,43 +0,0 @@
|
||||
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');
|
||||
}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
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');
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
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 { }
|
||||
@ -1,24 +0,0 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { NoRoutingNavPageComponent } from './no-routing-nav.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: NoRoutingNavPageComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class NoRoutingNavRoutingModule { }
|
||||
@ -1,20 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { PageOne } from './pages/page-one';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-nav [root]="pageOne"></ion-nav>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
export class NoRoutingNavPageComponent {
|
||||
|
||||
pageOne: any = PageOne;
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { NoRoutingNavPageComponent } from './no-routing-nav.component';
|
||||
import { NoRoutingNavRoutingModule } from './no-routing-nav-routing.module';
|
||||
import { IonicAngularModule } from '@ionic/angular';
|
||||
|
||||
import { PageOne } from './pages/page-one';
|
||||
import { PageTwo } from './pages/page-two';
|
||||
import { PageThree } from './pages/page-three';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
NoRoutingNavRoutingModule,
|
||||
IonicAngularModule,
|
||||
],
|
||||
declarations: [
|
||||
NoRoutingNavPageComponent,
|
||||
PageOne,
|
||||
PageTwo,
|
||||
PageThree
|
||||
],
|
||||
entryComponents: [
|
||||
PageOne,
|
||||
PageTwo,
|
||||
PageThree
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class NoRoutingNavModule { }
|
||||
@ -1,64 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { PageTwo } from './page-two';
|
||||
|
||||
@Component({
|
||||
selector: 'page-one',
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
Page One
|
||||
<div>
|
||||
<ion-button (click)="goToPageTwo()">Go to Page Two</ion-button>
|
||||
</div>
|
||||
<ul>
|
||||
<li>ngOnInit - {{ngOnInitDetection}}</li>
|
||||
<li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
|
||||
<li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
|
||||
</ul>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageOne {
|
||||
|
||||
ngOnInitDetection = 'initial';
|
||||
ionViewWillEnterDetection = 'initial';
|
||||
ionViewDidEnterDetection = 'initial';
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
console.log('page one ngOnInit');
|
||||
setInterval(() => {
|
||||
this.ngOnInitDetection = '' + Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
console.log('page one ionViewWillEnter');
|
||||
setInterval(() => {
|
||||
this.ionViewWillEnterDetection = '' + Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
ionViewDidEnter() {
|
||||
console.log('page one ionViewDidEnter');
|
||||
setInterval(() => {
|
||||
this.ionViewDidEnterDetection = '' + Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
goToPageTwo() {
|
||||
const nav = document.querySelector('ion-nav') as any;
|
||||
nav.push(PageTwo).then(() => console.log('push complete'));
|
||||
}
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'page-three',
|
||||
template: `
|
||||
<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>
|
||||
<ion-content>
|
||||
Page Three
|
||||
<div>
|
||||
<ion-button (click)="goBack()">Go Back</ion-button>
|
||||
</div>
|
||||
<ul>
|
||||
<li>ngOnInit - {{ngOnInitDetection}}</li>
|
||||
<li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
|
||||
<li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
|
||||
</ul>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageThree {
|
||||
|
||||
ngOnInitDetection = 'initial';
|
||||
ionViewWillEnterDetection = 'initial';
|
||||
ionViewDidEnterDetection = 'initial';
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
console.log('page two ngOnInit');
|
||||
setInterval(() => {
|
||||
this.ngOnInitDetection = '' + Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
console.log('page two ionViewWillEnter');
|
||||
setInterval(() => {
|
||||
this.ionViewWillEnterDetection = '' + Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
ionViewDidEnter() {
|
||||
console.log('page two ionViewDidEnter');
|
||||
setInterval(() => {
|
||||
this.ionViewDidEnterDetection = '' + Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
goBack() {
|
||||
const nav = document.querySelector('ion-nav') as any;
|
||||
nav.pop().then(() => console.log('pop complete'));
|
||||
}
|
||||
}
|
||||
@ -1,75 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { PageThree } from './page-three';
|
||||
|
||||
@Component({
|
||||
selector: 'page-two',
|
||||
template: `
|
||||
<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>
|
||||
<ion-content>
|
||||
Page Two
|
||||
<div>
|
||||
<ion-button (click)="goNext()">Go to Page Three</ion-button>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button (click)="goBack()">Go Back</ion-button>
|
||||
</div>
|
||||
<ul>
|
||||
<li>ngOnInit - {{ngOnInitDetection}}</li>
|
||||
<li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
|
||||
<li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
|
||||
</ul>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageTwo {
|
||||
|
||||
ngOnInitDetection = 'initial';
|
||||
ionViewWillEnterDetection = 'initial';
|
||||
ionViewDidEnterDetection = 'initial';
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
console.log('page two ngOnInit');
|
||||
setInterval(() => {
|
||||
this.ngOnInitDetection = '' + Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
console.log('page two ionViewWillEnter');
|
||||
setInterval(() => {
|
||||
this.ionViewWillEnterDetection = '' + Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
ionViewDidEnter() {
|
||||
console.log('page two ionViewDidEnter');
|
||||
setInterval(() => {
|
||||
this.ionViewDidEnterDetection = '' + Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
goNext() {
|
||||
const nav = document.querySelector('ion-nav') as any;
|
||||
nav.push(PageThree).then(() => console.log('push complete'));
|
||||
}
|
||||
|
||||
goBack() {
|
||||
const nav = document.querySelector('ion-nav') as any;
|
||||
nav.pop().then(() => console.log('pop complete'));
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,6 @@ import { PopoverPageToPresent } from './popover-page-to-present';
|
||||
selector: 'app-popover-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Test</ion-title>
|
||||
@ -21,7 +20,6 @@ import { PopoverPageToPresent } from './popover-page-to-present';
|
||||
<ion-content padding>
|
||||
<ion-button (click)="clickMe($event)">Open Basic Popover</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
@ -30,8 +28,8 @@ export class PopoverPageComponent {
|
||||
constructor(private popoverController: PopoverController) {
|
||||
}
|
||||
|
||||
clickMe(event: Event) {
|
||||
const popover = this.popoverController.create({
|
||||
async clickMe(event: Event) {
|
||||
const popover = await this.popoverController.create({
|
||||
component: PopoverPageToPresent,
|
||||
ev: event
|
||||
});
|
||||
|
||||
@ -4,7 +4,6 @@ import { Component } from '@angular/core';
|
||||
selector: 'app-segment-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
|
||||
@ -118,7 +117,6 @@ import { Component } from '@angular/core';
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Test</ion-title>
|
||||
@ -160,5 +159,4 @@
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,40 +0,0 @@
|
||||
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');
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
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 { }
|
||||
@ -1,19 +0,0 @@
|
||||
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 { }
|
||||
@ -1,47 +0,0 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NavController, NavParams } 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>isProd: {{isProd}}</div>
|
||||
<div>paramOne: {{paramOne}}</div>
|
||||
<div>paramTwo: {{paramTwo}}</div>
|
||||
<div>
|
||||
<ion-button (click)="navPop()">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`
|
||||
})
|
||||
export class PageThree {
|
||||
|
||||
ts: number;
|
||||
isProd = false;
|
||||
paramOne: any = null;
|
||||
paramTwo: any = null;
|
||||
constructor(private navController: NavController, private navParams: NavParams) {
|
||||
|
||||
this.isProd = navParams.get('isProd');
|
||||
this.paramOne = navParams.get('paramOne');
|
||||
this.paramTwo = navParams.get('paramTwo');
|
||||
|
||||
setInterval(() => {
|
||||
this.ts = Date.now();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
navPop() {
|
||||
this.navController.pop();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
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 { }
|
||||
@ -1,27 +0,0 @@
|
||||
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 { }
|
||||
@ -1,39 +0,0 @@
|
||||
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/jim/halpert');
|
||||
}
|
||||
|
||||
goBack() {
|
||||
this.navController.pop();
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
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/:paramOne/:paramTwo', loadChildren: './page-three/page-three.module#PageThreeModule', data: { isProd: true} }
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class SimpleNavRoutingModule { }
|
||||
@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-nav></ion-nav>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
export class SimpleNavPageComponent {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
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 {}
|
||||
@ -6,7 +6,6 @@ import { ToastController } from '@ionic/angular';
|
||||
selector: 'app-toast-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page class="show-page">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Test</ion-title>
|
||||
@ -15,7 +14,6 @@ import { ToastController } from '@ionic/angular';
|
||||
<ion-content padding>
|
||||
<ion-button (click)="clickMe()">Open Basic Toast</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
`
|
||||
})
|
||||
@ -25,8 +23,8 @@ export class ToastPageComponent {
|
||||
|
||||
}
|
||||
|
||||
clickMe() {
|
||||
const toast = this.toastController.create({
|
||||
async clickMe() {
|
||||
const toast = await this.toastController.create({
|
||||
closeButtonText: 'close dat toast',
|
||||
duration: 1000,
|
||||
message: 'Howdy ho toasty neighbor',
|
||||
|
||||
@ -6,7 +6,6 @@ import { ToastController } from '@ionic/angular';
|
||||
selector: 'app-virtual-scroll-page',
|
||||
template: `
|
||||
<ion-app>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Test</ion-title>
|
||||
@ -33,8 +32,6 @@ import { ToastController } from '@ionic/angular';
|
||||
</ion-virtual-scroll>
|
||||
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
|
||||
</ion-app>`
|
||||
})
|
||||
export class VirtualScrollPageComponent {
|
||||
|
||||
Reference in New Issue
Block a user