Как получить данные из одного компонента в другой подкомпонент в mat-dialog-data?

Question

У меня есть один компонент, и он состоит из другого компонента внутри.Я передаю данные из основного компонента в компонент mat-dialog.

Я получаю данные из веб-API и затем получаю их в основной компонент, проблема в том, что я не могу передать данные из основного компонента вбыть переданным в компоненте mat-dialog.

Примечание: компонент mat-dialog находится внутри основного компонента.

Я могу передать только статическое, а не динамическое значение.

import { Component, OnInit, AfterViewInit, ViewChild, Inject } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator, MatProgressBar, MatButton, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { ApiTransactionService } from '../service/api.transaction.service';
import { ModTransaction } from '../model/transaction';
import {of,} from 'rxjs';
import {delay} from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router';

import * as jwt_decode from 'jwt-decode';
import { stringify } from 'querystring';
import { TransactionComponent } from './transaction.component';

@Component({
  selector: 'mytransaction',
  templateUrl: '../view/mytransaction.component.html'

})



export class MyTransactionComponent implements OnInit, AfterViewInit
{
  public modtransaction: ModTransaction[];
  // modtransactions = {};
  transactions ={};
  userID = ''
  tranID = ''
  public displayedColumns = ['transactionID',  'quoteType', 'transactionType', 'boxType', 'itemDescription', 'itemQuantity', 'weight','startPoint', 'endPoint','addressee', 'status', 'dateCreated', 'receipt'];

  public dataSource = new MatTableDataSource<ModTransaction>();

  @ViewChild(MatSort) sort: MatSort;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private apiTransactionService: ApiTransactionService, private route: ActivatedRoute, public dialog: MatDialog) { }
  show = true;
  ngOnInit() {
    console.log(localStorage.getItem('token'));

    this.userID = jwt_decode(localStorage.getItem('token'));

    console.log(this.userID);
    of(this.getAllTransaction()).pipe(delay(1000))
       .subscribe(res =>{
        this.show = false;
      });
    }
  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  applyFilter(filterValue: string) {
     this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  public getAllTransaction = () => {
    this.apiTransactionService.getTransactionsByUsername(JSON.stringify(this.userID))
    .subscribe(res => {
      this.dataSource.data = res as unknown as ModTransaction[];

    })
  }

  load() {
       this.show = true;
       of(this.getAllTransaction()).pipe(delay(1000))
       .subscribe(res =>{
        this.show = false;
      });
  }

  openDialog(transactionID:string): void {
    this.tranID = JSON.stringify(this.userID) + '^' + transactionID;

    this.apiTransactionService.getTransactionsByUsername(this.tranID).subscribe(res =>{
      // res.push(this.modtransaction);
      this.modtransaction = res as unknown as ModTransaction[];

      console.log("checking....");
      console.log(this.modtransaction)


    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: this.modtransaction 
      // data: this.modtransactions
    });

    console.log('checkered')
    console.log(this.modtransaction)

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      // this.animal = result;

    });
  })
  }
}

@Component({
  selector: 'transactions',
  templateUrl: '../view/receipt.component.html',
  // providers: [
  //   { provide: MAT_DIALOG_DATA, useValue: { modtransaction : "Test" } }
  // ]
})

export class DialogOverviewExampleDialog implements OnInit {
  // public modtransaction: ModTransaction;

  constructor(public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: ModTransaction[] ) { }

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

  ngOnInit() {
    //set custom data from parent component

    // this.modtransaction = this.data.modtransaction;
    console.log("Whats")
    console.log(this.data)
  }


  onPrint() {
      var contents = document.getElementById("print-section").innerHTML;
      var frame1 = document.createElement('iframe');
          frame1.name = "frame3";
          frame1.style.position = "absolute";
          frame1.style.top = "-1000000px";
          document.body.appendChild(frame1);

      var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;

          frameDoc.document.open();
          frameDoc.document.write('<html><head> <style>md-dialog-actions{display:none}.invoice-box{max-width:800px;margin:auto;padding:30px;border:1px solid #eee;box-shadow:0 0 10px rgba(0,0,0,.15);font-size:16px;line-height:24px;color:#555}.invoice-box table{width:100%;line-height:inherit;text-align:left}.invoice-box table td{padding:5px;vertical-align:top}.invoice-box table tr td:nth-child(2){text-align:right}.invoice-box table tr.top table td{padding-bottom:20px}.invoice-box table tr.top table td.title{font-size:45px;line-height:45px;color:#333}.invoice-box table tr.information table td{padding-bottom:40px}.invoice-box table tr.heading td{background:#eee;border-bottom:1px solid #ddd;font-weight:700}.invoice-box table tr.details td{padding-bottom:20px}.invoice-box table tr.item td{border-bottom:1px solid #eee}.invoice-box table tr.item.last td{border-bottom:none}.invoice-box table tr.total td:nth-child(2){border-top:2px solid #eee;font-weight:700} </style>');
          frameDoc.document.write('</head><body>');
          frameDoc.document.write(contents);
          frameDoc.document.write('</body></html>');
          frameDoc.document.close();
        setTimeout(function () {
          window.frames["frame3"].focus();
          window.frames["frame3"].print();
          document.body.removeChild(frame1);
        }, 500);
      return false;
    }
}