美文网首页
ionic3重写nav的返回方法

ionic3重写nav的返回方法

作者: 天亮前被寻找的一只猫 | 来源:发表于2018-01-11 14:52 被阅读348次

    场景: 我们有一个部门人员机构功能, 页面时相同的, 当点击机构的时候,显示机构下的子机构, 再点击子机构的时候,显示机构下的人员.

    机构-->子机构-->部门-->人员

    如果这4个页面都相同,那么你会如何处理?

    push-->push-->push?

    如果这时候你跳了3个页面后, 选择了人员信息, 点击保存,想带到第一个页面, 怎么做?
    pop? 你也是只能pop的上一级而已.

    关键词: 单页面 + 重写返回方法
    那么既然涉及到这几个页面都相同, 那么就用一个单页面去处理就好, 点击机构,这时候并不是真的push到了子机构, 而是 从新渲染当前页面的数据而已.

    当触发了click 事件后,
    didClick(){
    在这个方法中我们别做Push. 而是去做请求,刷新你要展示的数据.

    重点 : 在服务层创建一个数组, push你当前点击的这个组织机构id. 同时记录这个数组的length
    }

    第二步:
    重写nav的返回方法.

    import { ViewChild } from '@angular/core';

    export class DetailPage {
    @ViewChild(Navbar) navBar: Navbar;
    }

    ionViewDidLoad(){
    this.navBar.backButtonClick = this.backButtonClick;
    }

    backButtonClick = (e: UIEvent) => { //这就是返回方法
    点击返回. 先判断你push的那个数组的长度
    if(arr.length==1){
    证明你已经在第一层了,这时候点击返回的方法,就要触发
    this.nav.pop;
    }else{//此时单击返回, 就好像是从子机构返回到主机构,这时候要做的只是渲染刷新数据
    此时.你拿到数组中的上一个元素,做请求. 请求完成后,把数组最后一个元素删除
    }
    }

    通过这种方法, 即 单页面渲染刷新的方式加载显示相同的页面. 避免了多次Push 造成的无法返回到指定页面的问题.

    相关文章

      网友评论

          本文标题:ionic3重写nav的返回方法

          本文链接:https://www.haomeiwen.com/subject/wdaznxtx.html