当变量基于使用 Angular 的更改事件发生更改时，将变量从子组件传递到父组件答案

【问题标题】：pass variable from child to parent component when variable changes based on a change event using Angular当变量基于使用 Angular 的更改事件发生更改时，将变量从子组件传递到父组件
【发布时间】：2018-03-16 03:08:50
【问题描述】：

我正在尝试将具有关联（更改）事件的选择输入中的输入值从子组件传递到父元素。希望每次更新子组件中的变量时更新变量。

我的问题与Question 不同，因为我的变量在更改事件中发生更改，并且每次变量更改时都需要更新。

我能够使用 ViewChild 和 AfterViewInit 解决这个问题，但我在控制台中收到错误消息：ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked。以前的值：'未定义'。当前值：“测试”。

认为必须有一种简单的方法来做到这一点。请记住，我还是 Angular 的新手。

子组件模板：

<form>
  <div class="form-group">
    <label for="Master-Products">Select Master Product</label>
    <select [(ngModel)]="selectedValue" name="pow" (change)="pow = $event.target.value; onKeyUp()" class="form-control" id="Master-Products">
      <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
    </select>
  </div>
</form>

子组件：

export class MasterInputComponent {
  powers: any[] = [ 'power1', 'power2', 'power3' ];
  submitted = false;
  pow:string = 'Testing';
  selectedValue = null;
  constructor() { }

  onKeyUp(value): void{
    console.log('Value: ',this.pow);
  }

父组件模板：

<div role="tabpanel" class="tab-pane" id="accessories">
  <h1>ACCESSORIES</h1>
  <h4>Testing: {{power}}</h4>
  <master-input (change)="recieveMessage($event.target.value)"></master-input>
  <accessories></accessories>

父组件：

export class AppComponent implements AfterViewInit{
  @ViewChild(MasterInputComponent) child;
  title = 'Having FUN with Angular';
  posts: any[];
  power:string;

  constructor(private service:ProductsService){}
  ngAfterViewInit(){
    this.power = this.child.pow;
  }

  recieveMessage(value){
    console.log('Event: ',value);
    this.power = value;
    console.log('Favorite has changed')
  }

任何帮助将不胜感激，谢谢！

【问题讨论】：

在这种情况下你会想要Output 和一个EventEmitter :) angular.io/guide/…
Pass data from child to parent component Angular2的可能重复
应该可以的... :) stackblitz.com/edit/…
我稍微更新了我的 stackblitz，所以如果您现在检查，它会将值分配给变量。在这种情况下，现在最好的办法是您采用 stackblitz，将您的代码应用到它上面展示错误，这样更容易提供帮助:)
完美，非常感谢！将仔细分析您的答案以完全了解您的所作所为。

标签： javascript angular components

【解决方案1】：

试试这个：

constructor(private service:ProductsService, private cdr: ChangeDetectorRef){}
ngAfterViewInit(){
    this.power = this.child.pow;
    this.cdr.detectChanges();
}

This link 将阐明问题的确切原因。

【讨论】：

当我将错误代码输入谷歌时，我实际上是在另一篇文章中读到的。最终没有帮助我，我也不太了解解决方案。
我提供的 SO 链接已经广泛讨论了这个问题。并且答案中的 cmets 指出了您面临的相同问题！
正如我之前提到的，我已经阅读了那篇文章并且不喜欢该解决方案，因为我不完全理解其背后的原因。我也是 Angular 的新手，更愿意理解我的代码，而不是仅仅粘贴一些答案，因为它可能会使我的代码工作。我已经在@AJT_82 的上述 cmets 中找到了我的问题的答案。当我有额外的时间时，我会进一步深入研究您的解决方案及其背后的制作过程。
当我在当天晚些时候回去尝试您的解决方案并发现它适用于我的情况时，我会将您的解决方案标记为答案。感谢您的宝贵时间。

【解决方案2】：

在您的代码中执行以下步骤：

(ngModelChange)="onKeyUp($event)" 而不是 (change)="pow = $event.target.value; onKeyUp()"

在您的子 ts 文件中

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

@Output() sendMessage = new EventEmitter();

onKeyUp(e) {
    this.sendMessage.next(e);
}

父级html

<master-input (sendMessage)="recieveMessage($event)"></master-input>
  <accessories></accessories>

以下代码将添加你的父 ts

recieveMessage(msg) {
    console.log('msg', msg)
}

【讨论】：