جاوااسکریپت - ارسال چندین مقدار از دیالوگ در Angular 8

من یک دیالوگ با استفاده از Material Design برای Angular ایجاد کردهام. در مثال اصلی فقط یک فیلد وجود داشت که به یک پارامتر در نمای والد متصل بود. من میخواهم یک دیالوگ ایجاد کنم که بیش از یک پارامتر جمعآوری کند و این پارامترها را به کامپوننت والد بازگرداند، تا بتوانم آنها را به API خود ارسال کنم.

الان چگونه به نظر میرسد:

<h1 mat-dialog-title>Create</h1>
<div mat-dialog-content>
  <p>Fill in a new company name</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.name">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Cancel</button>
  <button mat-button [mat-dialog-close]="data.name" cdkFocusInitial>Ok</button>
</div>

آنچه میخواهم به آن دست یابم:

<h1 mat-dialog-title>Create</h1>
    <div mat-dialog-content>
      <p>Fill in a new person name</p>
      <mat-form-field>
        <input matInput [(ngModel)]="data.name">
        <input matInput [(ngModel)]="data.surname">
        <input matInput [(ngModel)]="data.email">
        <input matInput [(ngModel)]="data.mobile">
        ...
      </mat-form-field>
    </div>
    <div mat-dialog-actions>
      <button mat-button (click)="onNoClick()">Cancel</button>
      <button mat-button [mat-dialog-close]="WHAT DO I ENTER HERE?" cdkFocusInitial>Ok</button>
    </div>

وقتی ویژگی [mat-dialog-close] را حذف کردم، دادهها هرگز به کامپوننت بازگردانده نشدند و نمیتوانستند به API ارسال شوند. آیا میتوانید راهنمایی کنید که چگونه میتوانم این مقادیر چندگانه را بازگردانم؟

پاسخ شماره ۱

تنها کاری که باید انجام دهید این است که دادهها را از فرزند (در این مورد مدال) به والد ارسال کنید، این کار با قرار دادن [mat-dialog-close]="data" در دکمه انجام میشود. والد میتواند مقادیری که از طریق شیء data ارسال شدهاند را مدیریت کند، اگر مقادیر به درستی اختصاص داده شده باشند.

  <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>

و

data: {name: this.name, role: this.role}

این StackBlitz را برای یک مثال ببینید. هر دو مقداری که اضافه کردهاید در کنسول چاپ میشوند و به شیء passedValues کامپوننت والد منتقل میشوند، که در فایل HTML چاپ شده است.

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
  console.log('All the data', result);
  this.passedValues = result;
});

پاسخ شماره ۲

تصور کنید چنین حالتی دارید، در مؤلفه ارجاعی میتوانید به راحتی همانطور که میخواهید استفاده کنید

    openDialog() {
        this.dialog.open(AddChargesComponent, {
          data: { name: this.name, surname:this.surname, email: this.email, mobile: this.mobile} 
        }).afterClosed().subscribe(response => {
          console.log(response.name,response.surname, response.email, response.mobile )
        })
      }