Angular 4+ Передача строки из одного диалогового окна в другое

Question

Я создал веб-приложение.Когда имя формы запрашивается для ввода при нажатии кнопки «new», а затем при нажатии кнопки сохранения, имя должно отображаться в этом диалоговом окне.Я создал соответствующие службы, но имя не отображается.Вот сегменты кода

NewForm.component.ts

export class NewFormComponent  {

  public formName: String;

  @Output() clicked: EventEmitter<boolean> = new EventEmitter();
  constructor(
    public dialogRef: MatDialogRef<NewFormComponent>,
    public formNewService: FormNewService ) { }

  discardSave(): void {
    this.dialogRef.close("Discarded");
  }


  sendFormName(): void {

    this.formNewService.sendFormName(this.formName);
    this.dialogRef.close();

  }

form-new.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';


@Injectable({
  providedIn: 'root'
})
export class FormNewService {

  public FormName:String;
  public newFormSubject = new Subject<any>();
  public newNameFormSubject = new Subject<any>();
  constructor() { }

  get events$ () {
    return this.newFormSubject.asObservable();
  }

  get eventsName$ () {
    return this.newNameFormSubject.asObservable();
  }
  sendFormName(formInfo) {
    this.newFormSubject.next(formInfo);
    this.FormName=formInfo;
    this.getFormName(this.FormName);
    }

  getFormName(formname) {
      this.newNameFormSubject.next(formname);  

    }

}

saveForm.component.ts

export class SaveFormComponent implements OnInit{

  public formName: String;
  @Input() clickedNew: boolean;

  @Output() clicked: EventEmitter<boolean> = new EventEmitter();
  constructor(
    public dialogRef: MatDialogRef<SaveFormComponent>,
    public formDataService: FormDataService,
    public formNewService: FormNewService) { }

  discardSave(): void {
    this.dialogRef.close("Discarded");
  }

ngOnInit(){
  this.formNewService.eventsName$.forEach(eventNew => {
    console.log("dd");
  });

}

  saveFormName(): void {

    this.formDataService.getSaveFormName(this.formName);
    this.dialogRef.close();
}
  }

Answer 1

Issue

У вас проблема с постоянным значением formName.Вы выбрали сервисный подход для связи между различными компонентами, что правильно, однако вы немедленно уведомляете компонент через Обозреватель.Но компонент (modal) еще не появился.

Если вы сохраните formName через modal и откроете другой modal, так как уведомление уже отправлено, и этот новый модал Subscriber не будет знать, что произошло впрошлое.

Решение

Так что исправьте эту проблему, чтобы сохранить последнее сохраненное значение в службе, которую вы уже выполняете.

Так что просто замените ваш Subject на BehaviorSubject. BehaviorSubject имеет характеристику, в которой хранится значение current.Это означает, что вы всегда можете напрямую получить последнее переданное значение из BehaviorSubject.

form-new.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';


@Injectable({
  providedIn: 'root'
})
export class FormNewService {

  public FormName:String;
  public newFormSubject = new Subject<any>();
  public newNameFormSubject = new BehaviorSubject();  // changed
  constructor() { }

  get events$ () {
    return this.newFormSubject.asObservable();
  }

  get eventsName$ () {
    return this.newNameFormSubject;  // changed
  }

  sendFormName(formInfo) {
    this.newFormSubject.next(formInfo);
    this.FormName=formInfo;
    this.getFormName(this.FormName);
    }

  getFormName(formname) {
      this.newNameFormSubject.next(formname);  

    }

}

Примечание. Возможно, вам придется изменитьдругие subject, если у вас есть аналогичные функции для newNameFormSubject