как получить доступ к свойствам компонента внутри всплывающего / диалогового компонента angular материала?

Question

Я открываю одно диалоговое окно из моего компонента.

 const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
             width: '500px',
            data: DialogData
            });

    dialogRef.afterClosed().subscribe(result => {
        this.dialogData = new DialogData('label...',this.frequency,'action','screen_ocr','parameter_type','parameter_value',0,'next_node',1,'index',false);
      console.log('The dialog was closed');

    });

Я хочу получить доступ к нескольким свойствам этого компонента, чтобы инициализировать DialogOverviewExampleDialog

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

    //here I want to use properties of my component

  constructor(private dialogService: DialogDataService,
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

Единственный способ, которым я мог разобраться при этом для доступа к свойствам используется объект поведения rx js, однако этот DialogOverviewExampleDialog объявлен внутри самого моего компонента. Есть ли способ прямого доступа к свойствам моего компонента внутри DialogOverviewExampleDialog? и наоборот.

Спасибо,

Answer 1

Вы можете попробовать это

component.ts Родительский компонент, из которого мы открываем диалоговое окно

import { Component, Inject } from '@angular/core';
import { VERSION, MatDialogRef, MatDialog, MatSnackBar, MAT_DIALOG_DATA } from '@angular/material';
import {ConfirmationDialog} from './confirm/confirmation-dialog.component';
@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  version = VERSION;

  constructor(private dialog: MatDialog,
    private snackBar: MatSnackBar) {
  }

  openDialog() {
    const dialogRef = this.dialog.open(ConfirmationDialog,{
      data:{name: 'Test1', from: 'Component'}  **// passing this data to dailog**
    });
    const snack = this.snackBar.open('Snack bar open before dialog');

    dialogRef.afterClosed().subscribe((confirmed: any) => {
     console.log(confirmed); **// after modal close data you will get here which passed from dialog on onConfirmClick() function**
    });
  }
}

translation-dialog.component.ts

import { Component, Inject } from '@angular/core';
import { VERSION, MatDialogRef, MatDialog, MatSnackBar, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'confirmation-dialog',
  templateUrl: 'confirmation-dialog.html',
})
export class ConfirmationDialog {
  message: string = "Are you sure?"
  confirmButtonText = "Yes"
  cancelButtonText = "Cancel"
  constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private dialogRef: MatDialogRef<ConfirmationDialog>) {
  console.log(this.data); **// Here is data recived from AppComponent.ts**
  }

  onConfirmClick(): void {
    this.dialogRef.close({name: 'Test', from: 'Dialog'}); **// on button click data will send to parent component after dialog close * AppComponent** 
  }

}

Answer 2

Используйте это: dialogRef.componentInstance.YOUR_PROPERTY

    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
             width: '500px',
            data: DialogData
            });
    dialogRef.componentInstance.YOUR_PROPERTY

    dialogRef.afterClosed().subscribe(result => {
        this.dialogData = new DialogData('label...',this.frequency,'action','screen_ocr','parameter_type','parameter_value',0,'next_node',1,'index',false);
      console.log('The dialog was closed');

    });