각도 2/이온 2의 생성자를 통해 데이터 새로 고침

Question

3 가지 데이터 세트에 대해 하나의보기가있는 Ionic 2 앱이 있습니다. 데이터는 생성자에로드되고 페이지 매개 변수의 변수를 기반으로 표시 할 데이터 세트가 결정됩니다.

observable에 의한 모든 성공적인 데이터 호출에서 이벤트 핸들러는 데이터가로드 될 때 성공을 기록합니다. 그러나 이것은 처음으로 클릭 /로드 할 때만 작동합니다.. 두 번째 또는 다른 시간을 클릭하면 데이터가 다시로드되지 않습니다 (로그 없음). 또한, 그냥 콘솔 로그 아무것도, 그것은 2 + 클릭시 표시되지 않습니다.

따라서 을 변경해야합니까? 매번 데이터를로드하려면을 변경하고 을 생성하는 방법은 이러한 방식으로 생성자를 사용하는 것이 좋습니다.

내 코드는 다음과 같습니다. Jsons는 namesListProvider에서 호출됩니다. 내가 이온하지만,이 각도없는 각도이 세계에서오고

@Component({ 
    templateUrl: '...', 
}) 
export class ListOfNames { 

    ... 
    private dataListAll: Array<any> = []; 
    private dataListFavourites: Array<any> = []; 
    private dataListDisliked: Array<any> = []; 


constructor(private nav: NavController, ...) { 

    ... 
    this.loadJsons(); 
    console.log('whatever'); 
    } 

    loadJsons(){ 
    this.namesListProvider.getJsons() 
    .subscribe(
     (data:any) => { 
     this.dataListFavourites = data[0], 
     this.dataListDisliked = data[1], 
     this.dataListAll = data[2] 

     if (this.actualList === 'mainList') { 
      this.listOfNames = this.dataListAll; 
      this.swipeLeftList = this.dataListDisliked; 
      this.swipeRightList = this.dataListFavourites; 
     } 
     else if (...) { 
      ... 
     } 
     this.listSearchResults = this.listOfNames; 


     }, err => console.log('hey, error when loading names list - ' + err), 
    () => console.info('loading Jsons complete')  
    ) 

    } 

Answer 1

이 Ionic2 페이지에서 Lifecycle events 있습니다

구성 요소 클래스는 OnInit 인터페이스를 구현해야합니다. 그래서 그 대신 ngOnInit를 사용하면 Ionic2이 노출 이벤트의 일부 사용할 수 있습니다

ionViewWillEnter { 
    // This will be executed every time the page is shown ... 
    this.loadJsons(); 
    // ... 
} 

---

편집 : 귀하의 경우

Page Event  Description 
----------  ----------- 
ionViewLoaded  Runs when the page has loaded. This event only happens once per page being created and added to the DOM. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewLoaded event is good place to put your setup code for the page. 
ionViewWillEnter Runs when the page is about to enter and become the active page. 
ionViewDidEnter Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page. 
ionViewWillLeave Runs when the page is about to leave and no longer be the active page. 
ionViewDidLeave Runs when the page has finished leaving and is no longer the active page. 
ionViewWillUnload Runs when the page is about to be destroyed and have its elements removed. 
ionViewDidUnload Runs after the page has been destroyed and its elements have been removed. 

를,이 같은 ionViewWillEnter 페이지 이벤트를 사용할 수 있습니다

비동기 적으로 해당 페이지에 표시 할 데이터를 얻으려면 데이터를 가져올 때까지 얼마나 걸릴지 모르기 때문에 데이터가 준비되면, 사용자가 loading popup을 사용하도록 권장하므로 사용자는 데이터가로드 될 때까지 몇 초 동안 빈 페이지를 표시하는 대신 배경에서 일어나는 일을 인식 할 수 있습니다. 다음과 같이 해당 동작을 코드에 쉽게 추가 할 수 있습니다.

// Import the LoadingController 
import { LoadingController, ...} from 'ionic/angular'; 

@Component({ 
    templateUrl: '...', 
}) 
export class ListOfNames { 

    ... 
    private dataListAll: Array<any> = []; 
    private dataListFavourites: Array<any> = []; 
    private dataListDisliked: Array<any> = []; 

    // Create a property to be able to create it and dismiss it from different methods of the class 
    private loading: any; 


    constructor(private loadingCtrl: LoadingController, private nav: NavController, ...) { 

    ... 
    this.loadJsons(); 
    console.log('whatever'); 
    } 

    ionViewWillEnter { 
    // This will be executed every time the page is shown ... 

    // Create the loading popup 
    this.loading = this.loadingCtrl.create({ 
     content: 'Loading...' 
    }); 

    // Show the popup 
    this.loading.present(); 

    // Get the data 
    this.loadJsons(); 

    // ... 
    } 

    loadJsons(){ 
    this.namesListProvider.getJsons() 
    .subscribe(
     (data:any) => { 
     this.dataListFavourites = data[0], 
     this.dataListDisliked = data[1], 
     this.dataListAll = data[2] 

     if (this.actualList === 'mainList') { 
      this.listOfNames = this.dataListAll; 
      this.swipeLeftList = this.dataListDisliked; 
      this.swipeRightList = this.dataListFavourites; 
     } 
     else if (...) { 
      ... 
     } 
     this.listSearchResults = this.listOfNames; 

     }, err => console.log('hey, error when loading names list - ' + err), 
    () => { 

     // Dismiss the popup because data is ready 
     this.loading.dismiss(); 

     console.info('loading Jsons complete')} 
    ) 

    } 

Answer 2

은 (ngInit/ngDestory) 초기화/32 파괴에 대한 콜백을 등록 할 수있는 옵션이 있습니다. 초기화를 ngInit으로 옮기고 구독 처리기를 저장하고 destory에서 구독을 취소하는 것을 잊지 마십시오. 귀하의 문제는 귀하가 탈퇴하지 않는 것과 관련이 있다고 생각합니다. \

Answer 3

해결 방법은 생성자에서이 작업을 수행하지 말고 대신 ngOnInit()을 사용하는 것입니다. 구성 요소는 한 번만 생성되므로 생성자는 처음 생성 될 때만 호출됩니다.

당신이 찾고있는 무엇

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    templateUrl: '...', 
}) 
export class ListOfNames implements OnInit { 
    constructor(...) 

    ngOnInit() { 
     this.loadJsons(); 
    } 

    private loadJsons() { 
     ... 
    } 
}