Ionic2视图的创建与删除

视图创建

当开发者往navigation stack里添加一个元素的时候，一个视图就会被创建出来。这个方法就是push(),NavController这个模块会通过@Component创建一个class，并作为模块的第一个参数。NavCotroller模块会在之后编译这个component.并把这个component添加到app，并塞入视图中。

新增一个新页面，我们使用NavCotroller的push方法，而某个被push的视图会接收到一个来自NavParams class的数据。

我们分析一下下面这段代码：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { OtherPage } from './other-page';
@Component({
   template: `
   <ion-header>
     <ion-navbar>
       <ion-title>Login</ion-title>
     </ion-navbar>
   </ion-header>

   <ion-content>
     <button ion-button (click)="pushPage()"> /*在标签里自定义一个pushPage()的函数*/
       Go to OtherPage
     </button>
   </ion-content>
   `
})
export class StartPage {
  constructor(public navCtrl: NavController) {//引入NavContoller模块
  }

  pushPage(){
    this.navCtrl.push(OtherPage, { //push()方法的第二个参数是一个对象，这个对象就是传递给OtherPage的参数，而第一个参数就是我们要加载的新页面。
      id: "123",
      name: "Carl"
    });
  }
}
------------------------------割了-----------------------------------
import { NavParams } from 'ionic-angular';
//我们引入NavParams模块，
@Component({  //创建的新组件，也就是一个新页面。
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Other Page</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>I'm the other page!</ion-content>`
})
class OtherPage {
  constructor(private navParams: NavParams) { //接受来自NavParams模块传递来的参数
     let id = navParams.get('id');
     let name = navParams.get('name');
  }
}

删除当前页面

删除比较简单只要调用NavCotroller模块中的pop()方法就可以直接删除。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Other Page</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>I'm the other page!</ion-content>`
})
class OtherPage {
   constructor(public navCtrl: NavController ){
   }

   popView(){
     this.navCtrl.pop();
   }
}