Отображение значений реактивной формы в другом компоненте

#angular

Вопрос:

Ситуация такова, что у меня есть несколько компонентов, таких как компонент A, в котором есть реактивная форма. Данные из форм собираются в одном сервисе. Теперь я хотел бы просмотреть эту форму в компоненте B, но после изменения пути на routerLink=»/ComponentB» данные из сервиса и компонента A больше не доступны. Ниже приведен код:

Компонент A

   constructor(
    private formBuilder: FormBuilder,
  ) {

    this.step = this.formBuilder.group({
      field: [''],
    });
    this.formService.stepReady(this.step, 'one');
  }

Обслуживание

   private stepOneSource: Subject<FormGroup> = new Subject();
  stepOne: Observable<FormGroup> = this.stepOneSource.asObservable();
  
    mainForm: FormGroup = this.formBuilder.group({
    one: this.formBuilder.group({
      field: [''],
    }),
  
    constructor(
    private formBuilder: FormBuilder
  ) {

    this.stepOne.subscribe(form =>
      form.valueChanges.subscribe(val => {
        this.mainForm.controls.one.patchValue(val);
      })
    );
  
    stepReady(form: FormGroup, part) {
    switch (part) {
      case 'one': {
        this.stepOneSource.next(form);
        break;
      }
    }
  }

1. когда вы реализуете stepOneSource.next, компонента B нет, поэтому он не может получить ничего. Я предположил, что просто сохраняю в переменной сервиса FormGroup this.formService.formVariable=this.step , а в ngOnInit компонента B получаю переменную this.stepFromComponentB=this.formService.formVariable . ПРИМЕЧАНИЕ: если вы хотите поделиться только «значением», передайте только значение формы

Ответ №1:

Используется BehaviourSubject , когда значение необходимо сохранить.

private stepOneSource: Subject<FormGroup> = new BehaviourSubject();

1. Это полезно. Проблема заключалась в том, что я сбрасывал ComponentB, снова настраивая providers: [FormService] Теперь у меня проблема в том, что после возврата из ComponentB обратно в ComponentA форма пуста.