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

refactor(): wrap nav pages and modal page in <ion-page>

Browse Source
This commit is contained in:
Dan Bucholtz
2018-01-09 13:41:08 -06:00
parent 1edd2704cf
commit 77a2ccb463
5 changed files with 85 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/demos/angular/src/app/modal/modal-page-to-present.ts
View File

@ -1,26 +1,30 @@
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'page-one',
template: `
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Page One
<ul>
<li>ngOnInit - {{ngOnInitDetection}}</li>
</ul>
</ion-content>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Page One
<ul>
<li>ngOnInit - {{ngOnInitDetection}}</li>
</ul>
<ion-button (click)="dismiss()">Close Modal</ion-button>
</ion-content>
</ion-page>
`
})
export class ModalPageToPresent {
ngOnInitDetection = 'initial';
constructor() {
constructor(private modalController: ModalController) {
}
@ -32,4 +36,7 @@ export class ModalPageToPresent {
}, 500);
}
dismiss() {
this.modalController.dismiss();
}
}

34
packages/demos/angular/src/app/nav/pages/page-one.ts
View File

@ -5,22 +5,24 @@ import { PageTwo } from './page-two';
@Component({
selector: 'page-one',
template: `
<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>
<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 {

34
packages/demos/angular/src/app/nav/pages/page-three.ts
View File

@ -3,22 +3,24 @@ import { Component } from '@angular/core';
@Component({
selector: 'page-three',
template: `
<ion-header>
<ion-toolbar>
<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>
<ion-header>
<ion-toolbar>
<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 {

38
packages/demos/angular/src/app/nav/pages/page-two.ts
View File

@ -5,25 +5,27 @@ import { PageThree } from './page-three';
@Component({
selector: 'page-two',
template: `
<ion-header>
<ion-toolbar>
<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>
<ion-page>
<ion-header>
<ion-toolbar>
<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>
<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>
<ul>
<li>ngOnInit - {{ngOnInitDetection}}</li>
<li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
<li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
</ul>
</ion-content>
</ion-page>
`
})
export class PageTwo {