angular материал диалоговое окно pass Dynami c функция при нажатии на сохранить

Question

dialog.ts

export class DialogComponent {
    constructor(private service: RestService, private dialogRef: MatDialogRef<DialogComponent>) {
    }

    no() {
        this.dialogRef.close();
    }

    save() {
        const url = 'https://gorest.co.in/public-api/users'; 
        const options = {headers: HttpHeaders, params: HttpParams};

        const getResp: any = this.service.Get(url, options);       
        this.dialogRef.close();

    ///THIS save() FUNCTION HARDCODED, BUT I WANT TO MAKE RESTCALL DYNAMICALLY WHEN ANYONE CLICKS SAVE BUTTON IN DIALOG
    }

}

диалоговое окно. html

<mat-dialog-actions>

    <button class="mat-raised-button"
            (click)="no()">
        no
    </button>

    <button class="mat-raised-button mat-primary"
            (click)="save()">
        save
    </button>

</mat-dialog-actions>

component1.ts

 getUsers() {

    const dialogConfig = new MatDialogConfig();

    const dialogRef = this.dialog.open(DialogComponent,
        dialogConfig, passSomeRestCall-1-FunctionSomehow());  
  }

component2.ts

 getEmployees() {

    const dialogConfig = new MatDialogConfig();

    const dialogRef = this.dialog.open(DialogComponent,
        dialogConfig, passSomeRestCall-2-FunctionSomehow());  
  }

Над двумя компонентами приходится использовать Dialog Component динамически, в настоящее время выше save () жестко закодировано с некоторым перезвоном, но на самом деле вызов покоя необходим при нажатии на save () для обоих вышеуказанных компонентов. Итак, вкратце, кнопка save () должна происходить динамически c restcall на основе компонента.

Может кто-нибудь, пожалуйста, помогите мне выше, я очень плохо знаком с angular.

РЕДАКТИРОВАТЬ:

 for (let i = 0; i < this.items.length; i++) {
      this.service.makeRestCall(this.items[i]);
    }

Как пройти выше для l oop logi c в диалоговом компоненте? Я должен иметь возможность делать некоторые бизнес-логики c динамически внутри save () на основе компонента, как показано ниже

save(){
   dynamicMethod() // this should be passed somehow from a component
  this.dialogRef.close();
} 

Answer 1

Вы можете передать свой URL, параметры и т. Д. c в качестве данных в диалоговом компоненте и передать их в функции сохранения, как показано ниже.

UserComponent

 openDialog(): void {
    let ApiDetails = {
      url: 'https://gorest.co.in/public-api/users'
    }
    const dialogRef = this.dialog.open(DialogComponent,
      {
        data: ApiDetails
      });
  }

DialogComponent

export class DialogComponent implements OnInit {

  constructor(
    private dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
  }

  no(){
    this.dialogRef.close()
  }

  save(){
    console.log(this.data) // this will have url and other details whatever you send from calling parent
  }

}

Answer 2

Вам не нужно передавать метод обратного вызова. Это должно быть частью модального родителя. Вам нужно только установить @Output в модальный тип с EventEmitter. Например:

@Output() save: EventEmitter<boolean>;

На кнопке Сохранить просто введите:

handleSave: void {
  this.save.emit(true);
}

Родитель будет прослушивать этот выход @ и обрабатывать его правильно.

dialogRef.componentInstance.save$.subscribe((res) => {
    // Here is your business logic 
  }
);

Итак: 1) Если после обработки все в порядке, вы можете использовать dialogRef в родительском элементе и закрыть модальное окно (dialogRef.close ()). 2) Если что-то не так, модальное не будет закрыто.

Используя этот способ, наш модал будет свободен от бизнес-логики c. Особенно важно для обобщенных модальностей c, таких как подтверждение, пользовательский ввод, ...