1. 程式人生 > >OnsenUI-頁面切換

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
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'}});
  }
}

切換後
testtwo

註釋開啟後可以來回切換