Angular：无法从其他组件接收值答案

【问题标题】：Angular: cannot receive value from other componentAngular：无法从其他组件接收值
【发布时间】：2018-11-03 04:36:59
【问题描述】：

我尝试为输入表单创建可重用的组件。页面会调用这个标签并获取数据到组中。

调用页面：我想调用标签并将值放入我在 FormGroup 中创建的“测试”

<div class="row">
   <proj-form-row-input [lable]="'Input 1'" [required]="true" formControlName="test"></proj-form-row-input>
</div>

HTML：我在这个组件中创建表单

<div class="col-sm-6 col-xs-12">
  <form [formGroup]="setupForm" class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-5">
        {{lable}}
        <span *ngIf="required" class="required">*</span>
      </label>
      <div class="col-sm-7">
        <input type="text" class="form-control" formControlName="data" />
      </div>
    </div>
  </form>
</div>

TS：用于发送回的数据

import { Component, OnInit, Input, forwardRef, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormGroup, FormBuilder } from '@angular/forms';
import { ValidateHelper } from '../../helper/validate-helper';

@Component({
  selector: 'proj-form-row-input',
  templateUrl: './form-row-input.component.html',
  styleUrls: ['./form-row-input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => FormRowInputComponent),
      multi: true
    }
  ]
})
export class FormRowInputComponent implements OnInit, ControlValueAccessor {

  @Input() public lable: string;
  @Input() public required: boolean = false;

  @Output() public data = new EventEmitter();

  public setupForm: FormGroup;
  public inputData: string;

  constructor(
    private fb: FormBuilder,
  ) { }

  ngOnInit() {
    this.initsetupForm();
  }

  writeValue(obj: string): void {
    if (ValidateHelper.isNotEqualString(obj, this.inputData)) {
      this.setInputData();
    } else {
      this.data.emit(obj);
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
  }

  private initsetupForm(): void {
    this.setupForm = this.fb.group({
      data: [''],
    });

    this.setupForm.controls['data'].valueChanges.subscribe((val) => {
      this.writeValue(val);
    });
  }

  private setInputData() {
    this.inputData = this.setupForm.controls['data'].value;
    this.data.emit(this.inputData);
  }

  private onChange(_: any) { }
  private onTouched() { }

}

FormControlName "test" 仍然没有值，我如何将发出回 "test" 的值取出来

【问题讨论】：

标签： html angular typescript

【解决方案1】：

目前，我没有看到您在任何地方订阅data: EventEmitter？

如果您声明EventEmitter 来在两个组件之间传输数据，则另一个组件将需要subscribe() 来接收数据。

在您的其他组件构造器中，如果您有 FormRowInputComponent 组件的实例，则订阅如下：

formRowInputInstance.data.subscribe(response => { this.someProperty = response });

Here 是在组件之间传递值的四种不同方法

【讨论】：

感谢您的回答。我对此很陌生，对如何传递数据非常困惑。
查看我提供的链接后，如果您需要任何进一步的帮助，请告诉我们