OnsenUI-页面切换

效果：页面testone跳转到页面testtwo

1.testone.component.html和testone.component.ts

<ons-page>
  <ons-toolbar>
    <div class="center">testone</div>
  </ons-toolbar>
  <ons-button (click)="gototesttwo()">go to testtwo</ons-button>
</ons-page>

import { Component, OnInit } from '@angular/core';
import { OnsNavigator, Params } from 'ngx-onsenui';
import { TesttwoComponent } from '../testtwo/testtwo.component';

@Component({
  selector: 'ons-page[testone678]',
  templateUrl: './testone.component.html',
  styleUrls: ['./testone.component.css']
})
export class TestoneComponent implements OnInit {

  constructor(
    private navigator: OnsNavigator,
    // private params:Params,
  ) { 
    // console.log(JSON.stringify(params.data));
  }

  ngOnInit() {
  }

  gototesttwo(){
    //data是跳转页面时传递的参数，可在目标页面用Params接收
    this.navigator.element.pushPage(TesttwoComponent,{data: {param1:'jj',param2:'yy'}});
  }
}

页面testone

2.testtwo.component.html和testtwo.component.ts

<ons-page>
  <ons-toolbar>
    <div class="center">testtwo</div>
  </ons-toolbar>
  <ons-button (click)="gototestone()">go to testone</ons-button>
</ons-page>

import { Component, OnInit } from '@angular/core';
import { Params, OnsNavigator } from 'ngx-onsenui';
import { TestoneComponent } from '../testone/testone.component';

@Component({
  selector: 'ons-page[testtwo987]',
  templateUrl: './testtwo.component.html',
  styleUrls: ['./testtwo.component.css']
})
export class TesttwoComponent implements OnInit {

  constructor(
    private params: Params,
    // private navigator: OnsNavigator,
  ) {
    //打印出接收的参数params
    console.log(JSON.stringify(params.data));
  }

  ngOnInit() {
  }

  gototestone() {
    // this.navigator.element.pushPage(TestoneComponent,{data: {param3:'yy',param4:'jj'}});
  }
}

切换后

注释打开后可以来回切换