Angular2应用程序在事件发出时不更新

Question

我有一个子组件，用于更新页面上的电话号码。当用户点击“保存”时按钮，应用程序应该获取更改的电话号码的文本，然后自动更新应用程序中看到的电话号码。

应用程序视图

弹出窗口允许用户更改电话号码

因此，当用户点击弹出窗口上的保存按钮时，应用程序中的数字需要自动更改。但是，这并没有发生。在我在页面上进行硬刷新之前，数字不会改变。任何人都可以向我解释我需要做些什么来解决这个问题吗？

editPhone.component（弹出）

validates :subject_id, presence: true, :if => exam_type.blank?

view.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.html（模板）

 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);
        }

为了避免提出评论和问题，我是否正确设置了应用程序，无论我是否正在使用我的服务等，都知道除了应用程序的这一部分外，一切都按照应有的方式进行

Answer 1

div不是编辑手机组件，因此它不会输出您尝试绑定的事件。真的，我很惊讶这在编译时不会抛出错误。

你需要这样做：

char*

所以你绑定到发出事件的组件上的事件。但这仅适用于编辑电话是显示电话号码的组件的直接子节点，如果它是兄弟姐妹或堂兄或其他东西，则需要使用共享服务模式。

Answer 2

您提供的代码view.component不是editPhone.component的父代。这意味着它无法收听@output。

工作html看起来像：

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

此外，您可能需要为eidt组件@Input()提供当前值

所以最终代码可能如下：

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

和editPhoneComponent

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);
    }
}