Ionic2视图的创建与删除

来源：互联网发布：李斯特改编知乎编辑：程序博客网时间：2024/04/27 10:13

视图创建

当开发者往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();   }}

0 0