イベント時にAngular2アプリケーションが更新されない

Question

私はページ上の電話番号を更新するために使用される子コンポーネントを持っています。ユーザーが「保存」ボタンを押すと、アプリケーションは変更された電話番号のテキストを取得し、アプリケーションに表示されている電話番号を自動的に更新します。ユーザーがポップアップで保存ボタンを押したときに、ユーザーが電話番号

を変更することができ

アプリケーションビュー

ポップアップだから、アプリケーション内の番号は自動的に変更する必要があります。しかし、これは起こっていません。私はページ上でハードリフレッシュを行うまで、数字は変化していません。誰でもこの問題を解決するために必要なことを私に説明することはできますか？

editPhone.component（ポップアップ）

@Output() phoneChanged = new EventEmitter<string>(); 
constructor(private _http: HttpClient, private _phone: PhoneService){} 
//Is called when the user clicks the 'Save' button 

    savePhone(patientOrder: PatientOrder, phoneText: string){ 
      this._phone.patientId = patientOrder.patientId; 

      return this._http.post('service', this._phone).subscribe((result:any) => { 
       this._phone.phoneText = result.phoneNumber; 
       this.phoneChanged.emit(this._phone.phoneText); 
      }); 
     } 

view.component（電話が更新見なければならないアプリケーション）

phoneNumber: string = ""; 
    phoneChanged(phone: string){ 
    //I'm never getting to this point. The application isn't failing, I'm just never seeing this being logged. 
      console.log(phone); 
     } 

view.html（テンプレート）

<new-orders> 
<div (phoneChanged)="phoneChanged($event)">{{phoneNumber}}</div> 
</new-orders> 

私はアプリケーションが正しく設定されているかどうか、私がサービスなどを打っているかどうかを尋ねるコメントや質問を避けるため、アプリケーションのこの部分以外はすべてが正常に動作することを確認してください。

Answer 1

divは編集電話コンポーネントではないため、バインドしようとしているイベントは出力されません。本当に私はあなたがコンパイルするときにこれがエラーをスローしないことに驚いています。

あなたは次のようにそれを行う必要があります：あなたは、イベントを発するコンポーネントにイベントにバインド

<edit-phone (phoneChanged)="phoneChanged($event)"></edit-phone> 

。しかし、これは編集電話が電話番号を表示するコンポーネントの直接の子である場合にのみ機能します。兄弟やいとこの場合は、代わりに共有サービスパターンを使用する必要があります。

Answer 2

view.componentのコードは、editPhone.componentの親ではありません。つまり、それは@outputを聞くことができません。

<view-component> 
    // Some MARKUP here 
    <edit-phone-component 
    [phoneNumber]=phoneNumber 
    (phoneChanged)="phoneChanged($event)"></edit-phone-component> 
    </view-component> 

とeditPhoneComponent：また、あなたはおそらく現在の値と同様

だから、最終的なコードかもしれないルックスをeidtコンポーネント@Input()を与える必要があります

<view-component> 
    // Some MARKUP here 
    <edit-phone-component (phoneChanged)="phoneChanged($event)"></edit-phone-component> 
    </view-component> 

：HTMLを考えワーキング

は次のようになります

export class EditPhoneComponent { 
    @Input() phoneNumber: string; 
    @Output() phoneChanged = new EventEmitter<string>(); 

    // Other method and constructor comes here 

    savePhone(patientOrder: PatientOrder, phoneText: string){ 
     // Some logic for saving comes here 
     this.phoneChanged.emit(this._phone.phoneText); 
    } 
}