Angular 4+将字符串从一个对话框传递到另一个对话框

Question

我已经创建了一个Web应用程序。当单击“新建”按钮，然后单击保存按钮时，要求输入表单名称的地方，该名称应显示在该对话框中。我已经创建了相关服务，但未显示名称。这是代码段

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

问题

您遇到持久性值为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