OnsenUI-页面切换

最新推荐文章于 2024-09-02 08:56:44 发布

kikyou`

最新推荐文章于 2024-09-02 08:56:44 发布

阅读量858

点赞数

分类专栏： onsen-ui 前端文章标签： onsenui

本文链接：https://blog.csdn.net/kikyou_csdn/article/details/81975968

版权

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

onsen-ui

3 篇文章

订阅专栏

本文介绍如何使用OnsenUI实现页面从testone到testtwo的切换。通过查看testone.component.html和testone.component.ts以及testtwo.component.html和testtwo.component.ts的代码，实现了注释打开后能进行来回页面切换的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：页面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'}});
  }
}