Angular4.x+Ionic3 구덩이 밟는 길 Ionic3.x pop 역방향 전송 값

3517 단어

1.Ionic3.x 페이지 양방향 전송 값


정방향 전가에 관해서는 지난 글에서 말했는데, 구체적으로는 여기segmentfault를 볼 수 있다.com/a/11...

2.Ionic3.x 페이지 pop 역방향 전송값은 주로 두 가지 방식이 있다

  • 1 .ES6를 통한 Promise 객체 제공
  • 2 Ionic 활용 3.x Event 객체 제공, 관찰자 모드(publish/subscribe)
  • 1) ES6 Promise
    여기에 두 개의 페이지가 있다고 가정하면 A 페이지, B 페이지가 있는데 상황은 다음과 같다. A는 B 페이지를 뛰어넘고 B 페이지에서 A 페이지로 돌아가려면 A 페이지에 선택한 값을 주어야 한다.
    A 페이지 코드
    html 내용
    
    

    ts 내용:
    import BPage from './BPage'
    export class APage{
    constructor(public navCtrl: NavController, public navParams: NavParams) {
    }
    //  pop   block
    callBackFromB  =(params) => {
         return new Promise((resolve, reject) => {
          if(params){
              resolve(' B ');
              console.log('B : '+ params);
          }else{
              reject(‘ B ’)
          }
       });
     }
     goToBPage (){
         this.navCtrl.push(BPage, {
            callback: this.callBackFromB
         })
     }
    }
    
    :Promise Es6 ,new , , resove, reject,resove , then , reject , catch , es7 async await,async Promise , !
    B 페이지 코드
    ts 내용:
    constructor(public navCtrl: NavController, public navParams: NavParams) {
    //  A 
       this.callback = this.navParams.get("callback")
        
    }
    
     goBack(){
       let param = ' A '
       this.callback(param).then(()=>{
         // pop 
          this.navCtrl.pop();
       });
      }
    
    1) Ionic3.x Event , (publish/subscribe)
    이벤트 대상은 주로 3가지 방법이 있습니다.
  • 게시publish(topic, 이벤트 데이터)
  • `매개 변수 1은 이벤트 이름을 발표하는 것이고, 두 번째 매개 변수는 데이터를 보내는 것이며, 사실은 셋째, 넷째...등, 모두 데이터를 전송할 수 있다
  • 구독subscribe(topic,handler)
  • , , , , .... `
  • unsubscribe(topic,handler) 구독 취소
  • , , : , true

    역방향 전송 코드를 실현하는 것은 다음과 같다.


    A 페이지 코드
    ts 코드
       goToBPage(){
         this.events.subscribe('bevents', (params) => {
                //  B 
                console.log(' : '+ paramsVar);
    
                //  
                this.events.unsubscribe('bevents'); 
            })
    
            this.navCtrl.push(BPage);
       }
    

    B 페이지 코드
    ts 코드
    goBack(){
      this.navCtrl.pop().then(() => {
        //   bevents 
        this.events.publish('bevents', ' B ');
      });
    }
    

    총결산


    상기에서 주로 역방향 전가의 두 가지 방법을 소개하였는데, 물론 다른 방법도 있습니다. 만약 당신이 더 좋은 방법이 있다면, 댓글로 토론하는 것을 환영합니다.

    좋은 웹페이지 즐겨찾기