Angular 4.x+Ionic3을 사용한 Ionic3.x pop의 역방향 값 전송에 대한 자세한 설명

이 글에서는 Angular 4가 구현하는 Ionic3.x pop의 역가치 전달에 대한 관련 정보를 주로 소개합니다. 배움의 가치, 필요한 친구들은 함께 배워보세요.

1.Ionic3.x 페이지 순방향 가치 전송

순방향 가치 전송에 대해서는 이전 기사에서 설명했습니다. 자세한 내용은 여기에서 읽을 수 있습니다: http://www.jb51.net/article / 136302.htm

2.Ionic3.x 페이지 팝 역방향 값 전송에는 크게 두 가지 방법이 있습니다

1. ES6를 사용하여 Promise 객체 제공

2 Ionic3.x를 사용하여 Event 객체, 관찰자 ​​모드 제공 ( 게시/구독)

1) ES6을 사용하여 Promise 개체 제공

페이지 A와 페이지 B의 두 페이지가 있다고 가정합니다. 시나리오는 다음과 같습니다. A는 페이지 B로 이동하고 페이지 A는 페이지 B의 페이지 A로 반환되었습니다. 반환할 값입니다.

페이지 코드

html content

<button (tap)="goToBPage()">跳转到B页面</button>

ts Content:

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는 개체이며 두 개의 콜백이 있습니다. 하나는 해결이고 다른 하나는 거부입니다. 해결은 성공적인 실행을 위한 콜백입니다. 즉, then 실행 메서드를 호출합니다. 거부는 실행 실패에 대한 콜백으로, 이제 es7에는 새로운 메서드가 있습니다. async 및 wait, async가 옳습니다. Promise의 추가 캡슐화에 대한 자세한 내용은 공식 문서를 참조하세요!

B 페이지 코드

ts Content:

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을 사용하세요.

1.Publish(topic, eventData)

`첫 번째 매개 변수는 게시 이벤트의 이름입니다. 두 번째 매개변수는 데이터를 전송하는 것입니다. 실제로 세 번째, 네 번째... 등도 전송할 수 있으며 모두 데이터를 전송할 수 있습니다.

2. 구독(주제, 핸들러)

첫 번째 매개변수는 이벤트입니다. 수신할 알루미늄 튜브의 두 번째 매개변수는 게시 시 전송되는 매개변수를 나타내며, 게시에 세 번째 매개변수가 있는 경우 동일한 구독 세 매개변수는 해당 게시의 세 번째 매개변수가 되는 식입니다....`

3 . Unsubscribe unsubscribe(topic, handler)

첫 번째 매개변수는 구독을 취소하려는 이벤트의 이름이고, 두 번째 매개변수는 콜백 함수, 반환 값: 성공적으로 제거되면 true를 반환합니다.

역방향 값 전송을 구현하는 코드는 다음과 같습니다. 팔로우

A 페이지 코드

ts code

 goToBPage(){
 this.events.subscribe('bevents', (params) => {
  // 接收B页面发布的数据
  console.log('接收数据为: '+ paramsVar);

  // 取消订阅
  this.events.unsubscribe('bevents'); 
 })
 this.navCtrl.push(BPage);
 }

B 페이지 코드

ts code

goBack(){
 this.navCtrl.pop().then(() => {
 // 发布 bevents事件
 this.events.publish('bevents', '我是B页面数据');
 });
}

위 내용은 제가 정리한 내용이길 바랍니다. 그것은 될 것이다 앞으로도 도움이 될 것입니다.

관련 기사:

vue {{}}가 렌더링 시 깜박임 및 해당 솔루션

js가 ModelAndView 값을 가져오는 문제에 대한 간략한 토론

Vue 페이지 로딩 깜박임 문제

위 내용은 Angular 4.x+Ionic3을 사용한 Ionic3.x pop의 역방향 값 전송에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!