Question

我希望两个以两种单独的反应形式绑定到值。所以我有一个组件作为主要包括两个单独的组件，如组件一和组件二。在他们每个人都是一个形式。因此，在组件1中，字段名称 - 也在组件2中。当我从一个字段更改值时，它必须绑定到另一个字段。也许这里有人可以给我一个小小的暗示如何做到这一点。

Answer 1

根据您的qeustion，您看起来在html页面上有两个单独的组件，并希望在它们之间提供交互。

要实现这一目标，您应该在compoenent 之间使用共享服务，以便进行交互。

你应该遵循这个：Communicate between component via a service，文章还列出了其他沟通方式，看看。

Answer 2

我的解决方案：

创建服务

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ComponentInteractionService {
  public name = new Subject<string>();
}

组件A：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ComponentInteractionService } from '../../services/component-interaction.service';

@Component({
  selector: 'app-form-eins',
  templateUrl: './form-eins.component.html',
  styleUrls: ['./form-eins.component.css']
})
export class FormEinsComponent implements OnInit {

  formEins: FormGroup;

  constructor(private fb: FormBuilder,
    private ci: ComponentInteractionService) { }

  submit() {
    this.ci.name.next(this.formEins.get("nameEins").value);
  }

  ngOnInit() {

    this.formEins = this.fb.group({
      nameEins: ''
    });

    this.ci.name.subscribe( 
      data => { this.formEins.get("nameEins").setValue(data); }
    );   

  }

}

组件B：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ComponentInteractionService } from '../../services/component-interaction.service';

@Component({
  selector: 'app-form-zwei',
  templateUrl: './form-zwei.component.html',
  styleUrls: ['./form-zwei.component.css']
})
export class FormZweiComponent implements OnInit {

  formZwei: FormGroup;

  constructor(private fb: FormBuilder,
    private ci: ComponentInteractionService) { }

  submit() {
    this.ci.name.next(this.formZwei.get("nameEins").value);
  }

  ngOnInit() {

    this.formZwei = this.fb.group({
      nameEins: ''
    });

    this.ci.name.subscribe( 
      data => { this.formZwei.get("nameEins").setValue(data); }
    ); 

  }

}

Angular Reactive Forms以单独的形式绑定两个字段

2 个答案: