Angular2/Ionic2 : 새로 고침 구성 요소

Question

나는 몇 가지 바인딩 속성을 노출하고 다음과 같이 사용할 수 있습니다 내 루트 페이지에서 구성 요소가 있습니다. 더 읽기와

<myprogress [value]="order.currentStage" [max]="order.totalStages"></myprogress> 

:

는

<myprogress [order]="order"></myprogress> 

이의 일부까지 잘 작동

@Directive({ 
    selector: 'myprogress[order]' 
}) 
export class OrderProgress { 
    @Input('order') order: Order; 
    constructor(private baseComponent: Progress) {} 
    ngOnInit() { 
    this.baseComponent.value = this.order.currentStage; 
    this.baseComponent.max = this.order.totalStages; 
    } 
} 

이 날 같은 전화를 대체 할 수 있습니다 : 그래서 다음과 같은 몇 가지 지침을 만들어 응용 프로그램이 순서 자체를 변경합니다. 이 경우 이미 렌더링 된 myprogress 구성 요소는 업데이트되지 않습니다. 그 이유도 알 수 있습니다. ngOnInit 함수는 구성 요소가 렌더링 될 때 한 번만 실행되며 지시문의 일부 속성이 변경되었고 value 및 max의 새 값을 계산해야 함을 지시문에 표시 할 방법이 없습니다.

이 문제를 해결할 방법이 있습니까? 내가 가진

한 가지 가능한 해결책은 이것이다 :

1. 수정 Progress 구성 요소는 숫자뿐만 아니라 숫자를 반환하는 함수를 적용합니다. this.baseComponent.value =() => this.order.currentStage

을하지만 그것은뿐만 아니라 Progress 구성 요소를 변경하는 나를 필요 OrderProgress의 ngOnInit, 바인드에서

는 다음과 같다. Progress 또는 Order을 변경할 필요가없는 방법이 있습니까?

Answer 1

주문 개체에 대해 관찰 가능을 구현해야하는 것처럼 들립니다. 여러 구성 요소간에 해당 객체를 공유하고 해당 구성 요소에 주문 객체의 변경 사항을 알리려면 Observable을 만드는 것이 가장 좋습니다. 우리는 rxjs의 BehavoirSubject 클래스를 사용하여이를 수행합니다.

RxJs BehaviorSubject

은 여기하고 BehavoirSubject을 만드는 방법의 예 :

export class TokenService { 

    public tokenSubject: BehaviorSubject<OpenIdToken> = new BehaviorSubject<OpenIdToken>(<OpenIdToken>{}); 

OpenIdToken 내가 내 응용 프로그램을 통해 공유하고 싶은 사용자 정의 타이프 라이터 클래스입니다.

setObservableToken(token: OpenIdToken): void { 
     if (token) { 
      this.tokenSubject.next(token); 
     } 
    } 

라고 다음 내용 후 새로운 토큰 개체 값은 모든 가입자에게 propigate 것 : 여기

는 방법을 기본 객체에 대한 변경 가입자에게 알립니다이다. 다음은 BehaviorSubject에 가입하는 방법입니다

export class PatientComponent implements OnInit, OnDestroy {  

    patient: Patient; 

    constructor(private _tokenService: TokenService, private _patientService: PatientService) { } 

    ngOnInit() { 
     this._tokenService.tokenSubject.subscribe(token => { 
      if (token && token.access_token && token.access_token.length>0) { 
       this._patientService.getPatient(token) 
        .subscribe(_patient => this.patient = _patient); 
      } 
     }); 
    } 

가 가입하면 가입이 토큰의 변경을 방송 할 때 (이 다음 내용 (토큰)를 호출 할 때) 실행됩니다 대리자입니다. 이 경우 OpenIdToken을 얻을 때 토큰을 사용하여 환자를 가져오고 다른 서비스를 호출하려고합니다.

Answer 2

주문 유형은 Subject 또는 BehaviorSubject 여야하므로 주문을 업데이트 할 때 myprogress의 템플릿도 업데이트해야합니다. 관측 가능을 구독하려면 비동기 파이프를 사용해야합니다.

<myprogress [order]="order$ | async"></myprogress> 

이 코드를 확인하십시오. 주문을 업데이트하려면 this.newOrder({...});으로 전화해야합니다.

@Component({ 
    selector: 'page-home', 
    template: ` 
    <ion-header> 
     <ion-navbar> 
     <ion-title>Home</ion-title> 
     </ion-navbar> 
    </ion-header> 

    <ion-content padding> 
     <myprogress [order]="order$ | async"></myprogress> 
    </ion-content> 
` 
}) 
export class HomePage implements OnInit,OnDestroy{ 

    order$: Subject<any> = new Subject(); 

    constructor(public navCtrl: NavController){ 
    } 

    ngOnInit(){ 
    } 

    newOrder(order : any){ 
    this.order$.next(order); 
    } 

    ngOnDestroy(){ 
    this.order$.unsubscribe(); 
    } 

}