I am trying to pass data from a Dialog back to the component from which the user opened the dialog from. My simple example is below:
test.component.ts
import { xDialogComponent } from './../x-dialog/x-dialog.component';
import { xFilter } from './x-filter';
import { xLevelResult, xmodelResult, xpayResult, xpayClassResult, xSpResult } from './../database.service';
import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { databaseService, xSigResult, xOutResult, CurxpayResult } from '../database.service';
import { HttpClient } from '@angular/common/http';
import { NgIf } from '@angular/common/src/directives/ng_if';
import { element } from 'protractor';
import { ActivatedRoute } from '@angular/router';
import { MakeGroup, xpayteamResult, xpayteamSPResult, NoticeResult } from '../database.service';
import { DateResult } from '../database.service';
import { DatePipe } from '@angular/common';
import { Router } from '@angular/router';
import {MatSortModule} from '@angular/material/sort';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {MatTabsModule} from '@angular/material/tabs';
import {Observable, forkJoin} from 'rxjs';
import {mergeMap, expand, map, flatMap, concat, switchMap, combineAll} from 'rxjs/operators';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatFormFieldModule} from '@angular/material/form-field';
import { MatInputModule, MatTableModule, MatPaginatorModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import {MatSnackBar} from '@angular/material';
import { MakeService } from './../../Make.service';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';
@Component({
selector: 'app-x',
templateUrl: './x.component.html',
styleUrls: ['../style.css']
})
export class xComponent implements OnInit {
MakeGroups: MakeGroup[];
xLevelresults: Array<xLevelResult>;
xmodelresults: Array<xmodelResult>;
xsigresults: Array<xSigResult>;
curxpayresults: Array<CurxpayResult>;
xpayresults: Array<xpayResult>;
xpayclassresults: Array<xpayClassResult>;
xpayteamresults: Array<xpayteamResult>;
xpayteamspresults: Array<xpayteamSPResult>;
FinalArray: any[] = [];
x_sp_results: Array<xSpResult>;
noticeresults: Array<NoticeResult>;
modelName: string;
TransactionDate: string;
MakeName: string;
delete: string;
dateselect: string;
noticedays: number;
selectedEffect: number;
// Disablers
SubmitDisabled: boolean;
AmountDisabled: boolean;
DateDisabled: boolean;
ISDisabled: boolean;
modelDisabled: boolean;
SigDisabled: boolean;
editswitch: boolean;
nextswitch: boolean;
// Selection variables for SP Call
selectedLevel: number;
selectedAmount: number;
selectedmodelNbr: number;
selectedClassId: number;
Advteam_DRAW_REPAY: number;
selectedSigId: number;
// SP Call
xspcall: string;
// Date variables
date: Date;
selectedDate = '';
success: boolean;
tomorrow: number;
yformat = '';
// x Outstanding
xoutresults: Array<xOutResult>;
x: number;
constructor(
private databaseService: databaseService,
private route: ActivatedRoute,
private router: Router,
private MakeService: MakeService,
public dialogx: MatDialog,
public snackBar: MatSnackBar
) {}
// changes the actual value of the variable for selectedLevel based on user selection
changedLevel (xLevelresult: xLevelResult) {
// Disable to ensure user enters correct data
this.SubmitDisabled = true;
this.DateDisabled = true;
this.SigDisabled = true;
this.xpayresults = [];
this.xsigresults = [];
this.selectedDate = undefined;
this.selectedSigId = undefined;
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray = [];
this.selectedAmount = undefined;
this.selectedLevel = (xLevelresult ? xLevelresult.Make_Level_Id : 1);
console.log(this.selectedLevel);
// Populate model Drop-Down
const id = this.route.snapshot.paramMap.get('id');
this.databaseService.getxmodel(id, this.selectedLevel)
.subscribe(xmodelresults => this.xmodelresults = xmodelresults);
}
// changes the actual value of the variable for selectedmodelNbr based on user selection
changedmodel (xmodelresult: xmodelResult) {
this.SubmitDisabled = true;
this.DateDisabled = true;
this.SigDisabled = true;
this.selectedDate = undefined;
this.xpayresults = [];
this.xsigresults = [];
this.selectedSigId = undefined;
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray = [];
this.selectedAmount = undefined;
this.selectedmodelNbr = (xmodelresult ? xmodelresult.model_Nbr : 1 );
console.log(this.selectedmodelNbr);
}
// // changes the actual value of the variable for selectedAmount based on user selection
changedAmount (event: any) {
if (this.editswitch === true) {
this.SubmitDisabled = true;
this.DateDisabled = true;
this.selectedAmount = event.target.value;
this.xpayresults = [];
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray = [];
const id = this.route.snapshot.paramMap.get('id');
// change all values
this.selectedDate = this.xoutresults[this.x].Calc_Dt;
this.selectedLevel = this.xoutresults[this.x].Make_Level_Id;
this.selectedmodelNbr = this.xoutresults[this.x].model_Nbr;
// Populate form Data
this.databaseService.getxLevel(id)
.subscribe(xLevelresults => this.xLevelresults = xLevelresults);
this.databaseService.getxmodel(id, this.selectedLevel)
.subscribe(xmodelresults => this.xmodelresults = xmodelresults);
this.databaseService.getxSig(id, this.selectedLevel, this.selectedDate)
.subscribe(xsigresults => this.xsigresults = xsigresults);
// Set Vals
this.modelName = this.xoutresults[this.x].model_Name;
this.TransactionDate = this.xoutresults[this.x].Calc_Dt;
this.MakeName = this.xoutresults[this.x].Make_Level_Name;
// Populate the outstanding x Requests effecting the current request
this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
.subscribe(curxpayresults => this.curxpayresults = curxpayresults,
error => console.log('ERROR!'),
() => {
// Set the effect on Outs Prin
if (this.curxpayresults.length === 0) {
this.selectedEffect = 0;
} else {
this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
}
// Populate model Level Data
this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
.subscribe(xpayresults => this.xpayresults = xpayresults,
error => console.log('ERROR!'),
// Check that Max CMT can cover the request
() => { console.log(this.xpayresults[0].reaminder);
if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
// snack
if (this.xpayresults[0].reaminder < 0) {
this.snackBar.open('You:: ' +
(this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
} else {
this.snackBar.open('You: ' +
(this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
}
} else {
// Populate Class and team Level Data for Screen
this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
.subscribe(
(xpayclassresults) => {
this.xpayclassresults = xpayclassresults;
for (const xpayclassresult of this.xpayclassresults) {
this.selectedClassId = xpayclassresult.Class_ID;
console.log(this.selectedClassId);
this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
, this.selectedAmount, this.selectedClassId, this.selectedEffect )
.subscribe((xpayteamresults) => {
this.xpayteamresults = xpayteamresults;
this.FinalArray.push(this.xpayteamresults);
}, error => console.log('ERROR!'),
() => {
this.DateDisabled = false;
this.SubmitDisabled = false;
});
}
});
// Get team Level Data for SP submissions
this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
, this.selectedAmount)
.subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
error => console.log('ERROR!'),
() => {
});
}
});
});
} if (this.nextswitch === true) {
this.SubmitDisabled = true;
this.DateDisabled = true;
this.selectedAmount = event.target.value;
this.xpayresults = [];
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray = [];
const id = this.route.snapshot.paramMap.get('id');
// Populate the outstanding x Requests effecting the current request
this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
.subscribe(curxpayresults => this.curxpayresults = curxpayresults,
error => console.log('ERROR!'),
() => {
// Set the effect on Outs Prin
if (this.curxpayresults.length === 0) {
this.selectedEffect = 0;
} else {
this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
}
// Populate model Level Data
this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
.subscribe(xpayresults => this.xpayresults = xpayresults,
error => console.log('ERROR!'),
// Check that Max CMT can cover the request
() => { console.log(this.xpayresults[0].reaminder);
if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
// snack
if (this.xpayresults[0].reaminder < 0) {
this.snackBar.open('You:: ' +
(this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
} else {
this.snackBar.open('You: ' +
(this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
}
} else {
// Populate Class and team Level Data for Screen
this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
.subscribe(
(xpayclassresults) => {
this.xpayclassresults = xpayclassresults;
for (const xpayclassresult of this.xpayclassresults) {
this.selectedClassId = xpayclassresult.Class_ID;
console.log(this.selectedClassId);
this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
, this.selectedAmount, this.selectedClassId, this.selectedEffect )
.subscribe((xpayteamresults) => {
this.xpayteamresults = xpayteamresults;
this.FinalArray.push(this.xpayteamresults);
}, error => console.log('ERROR!'),
() => {
this.DateDisabled = false;
this.SubmitDisabled = false;
});
}
});
// Get team Level Data for SP submissions
this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
, this.selectedAmount)
.subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
error => console.log('ERROR!'),
() => {
});
}
});
});
} else {
this.xsigresults = [];
this.selectedSigId = undefined;
this.SubmitDisabled = true;
this.DateDisabled = true;
this.SigDisabled = false;
this.xpayresults = [];
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray = [];
const id = this.route.snapshot.paramMap.get('id');
// Populate Signatory Drop-Down
this.databaseService.getxSig(id, this.selectedLevel, this.selectedDate)
.subscribe(xsigresults => this.xsigresults = xsigresults);
// change amount value
this.selectedAmount = event.target.value;
console.log(this.selectedAmount);
}
// Populate Values for Notice Days Drop-Down
const id = this.route.snapshot.paramMap.get('id');
this.databaseService.getNotice(id)
.subscribe(noticeresults => this.noticeresults = noticeresults,
error => console.log('ERROR!'),
() => {
if (this.selectedAmount > 0) {
this.noticedays = this.noticeresults[0].Min_Repay_Notice_Days;
console.log(this.noticedays);
} else {
this.noticedays = this.noticeresults[0].Min_Adv_Notice_Days;
}
});
}
// // changes the actual value of the variable for selectedSigId based on user selection
changedSig (xsigresult: xSigResult) {
this.SubmitDisabled = true;
this.DateDisabled = false;
this.selectedDate = undefined;
this.xpayresults = [];
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray = [];
this.selectedSigId = (xsigresult ? xsigresult.Signatory_ID : 1 );
console.log(this.selectedSigId);
}
// changes the actual value of the variable for selectedDate based on user selection of the date and pulls corresponding data
changedDate (event: any) {
// Disable to ensure user enters correct data
this.DateDisabled = true;
this.SubmitDisabled = true;
// change date value
this.selectedDate = event.target.value;
console.log(this.selectedDate);
this.xpayresults = [];
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray = [];
const id = this.route.snapshot.paramMap.get('id');
// Populate the outstanding x Requests effecting the current request
this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
.subscribe(curxpayresults => this.curxpayresults = curxpayresults,
error => console.log('ERROR!'),
() => {
// Set the effect on Outs Prin
if (this.curxpayresults.length === 0) {
this.selectedEffect = 0;
} else {
this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
}
// Populate model Level Data
this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
.subscribe(xpayresults => this.xpayresults = xpayresults,
error => console.log('ERROR!'),
// Check that Max CMT can cover the request
() => { console.log(this.xpayresults[0].reaminder);
if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
// snack
if (this.xpayresults[0].reaminder < 0) {
this.snackBar.open('You:: ' +
(this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
} else {
this.snackBar.open('Yo: ' +
(this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
}
} else {
// Populate Class and team Level Data for Screen
this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
.subscribe(
(xpayclassresults) => {
this.xpayclassresults = xpayclassresults;
for (const xpayclassresult of this.xpayclassresults) {
this.selectedClassId = xpayclassresult.Class_ID;
console.log(this.selectedClassId);
this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
, this.selectedAmount, this.selectedClassId, this.selectedEffect )
.subscribe((xpayteamresults) => {
this.xpayteamresults = xpayteamresults;
this.FinalArray.push(this.xpayteamresults);
}, error => console.log('ERROR!'),
() => {
this.DateDisabled = false;
this.SubmitDisabled = false;
});
}
});
// Get team Level Data for SP submissions
this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
, this.selectedAmount)
.subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
error => console.log('ERROR!'),
() => {
});
}
});
});
}
submit() {
this.DateDisabled = true;
this.ISDisabled = true;
this.modelDisabled = true;
this.SubmitDisabled = true;
this.AmountDisabled = true;
this.SigDisabled = true;
if (this.selectedAmount > 0) {
for (const xpayteamspresult of this.xpayteamspresults) {
this.Advteam_DRAW_REPAY = (xpayteamspresult.team_DRAW_REPAY * -1);
this.xspcall = ('\'' + this.selectedDate + '\',' +
xpayteamspresult.Make_Level_Debt_ID + ',' + xpayteamspresult.Make_Id +
',' + xpayteamspresult.Make_Level_Id + ',' + xpayteamspresult.Class_ID + ',' +
xpayteamspresult.Debt_ID + ',' + xpayteamspresult.team_ID + ',' +
xpayteamspresult.team_DRAW_REPAY + ',' + '0' + ',' + this.Advteam_DRAW_REPAY);
this.databaseService.getxSP(this.xspcall).subscribe(x_sp_results => this.x_sp_results = x_sp_results);
}
} else {
for (const xpayteamspresult of this.xpayteamspresults) {
this.xspcall = ('\'' + this.selectedDate + '\',' +
xpayteamspresult.Make_Level_Debt_ID + ',' + xpayteamspresult.Make_Id +
',' + xpayteamspresult.Make_Level_Id + ',' + xpayteamspresult.Class_ID + ',' +
xpayteamspresult.Debt_ID + ',' + xpayteamspresult.team_ID + ',' +
'0' + ',' + xpayteamspresult.team_DRAW_REPAY + ',' + xpayteamspresult.team_DRAW_REPAY);
this.databaseService.getxSP(this.xspcall).subscribe(x_sp_results => this.x_sp_results = x_sp_results);
}
}
const id = this.route.snapshot.paramMap.get('id');
this.router.navigate(['/dashboard', id]);
}
submitEditDel (val) {
this.dateselect = '';
this.delete = 'To DELETE an existing entry mark this 0 and submit.';
this.DateDisabled = true;
this.ISDisabled = true;
this.modelDisabled = true;
this.SubmitDisabled = true;
this.AmountDisabled = false;
this.SigDisabled = true;
this.x = val;
this.editswitch = true;
console.log(this.x);
this.xpayresults = [];
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray = [];
const id = this.route.snapshot.paramMap.get('id');
// change all values
this.selectedDate = this.xoutresults[this.x].Calc_Dt;
this.selectedAmount = this.xoutresults[this.x].Advance;
this.selectedLevel = this.xoutresults[this.x].Make_Level_Id;
this.selectedmodelNbr = this.xoutresults[this.x].model_Nbr;
// Set Vals
this.modelName = this.xoutresults[this.x].model_Name;
this.TransactionDate = this.xoutresults[this.x].Calc_Dt;
this.MakeName = this.xoutresults[this.x].Make_Level_Name;
// Populate the outstanding x Requests effecting the current request
this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
.subscribe(curxpayresults => this.curxpayresults = curxpayresults,
error => console.log('ERROR!'),
() => {
// Set the effect on Outs Prin
if (this.curxpayresults.length === 0) {
this.selectedEffect = 0;
} else {
this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
}
// Populate model Level Data
this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
.subscribe(xpayresults => this.xpayresults = xpayresults,
error => console.log('ERROR!'),
// Check that Max CMT can cover the request
() => { console.log(this.xpayresults[0].reaminder);
if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
// snack
if (this.xpayresults[0].reaminder < 0) {
this.snackBar.open('You:: ' +
(this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
} else {
this.snackBar.open('You:y: ' +
(this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
}
} else {
// Populate Class and team Level Data for Screen
this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
.subscribe(
(xpayclassresults) => {
this.xpayclassresults = xpayclassresults;
for (const xpayclassresult of this.xpayclassresults) {
this.selectedClassId = xpayclassresult.Class_ID;
console.log(this.selectedClassId);
this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
, this.selectedAmount, this.selectedClassId, this.selectedEffect)
.subscribe((xpayteamresults) => {
this.xpayteamresults = xpayteamresults;
this.FinalArray.push(this.xpayteamresults);
}, error => console.log('ERROR!'),
() => {
this.AmountDisabled = false;
this.SubmitDisabled = false;
});
}
});
// Get team Level Data for SP submissions
this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
, this.selectedAmount)
.subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
error => console.log('ERROR!'),
() => {
});
}
});
});
}
openDialog(): void {
const id = this.route.snapshot.paramMap.get('id');
const dialogRef = this.dialogx.open(xDialogComponent, {
width: '880px' });
dialogRef.componentInstance.id = id;
dialogRef.componentInstance.Levelid = this.selectedLevel;
dialogRef.componentInstance.modelnbr = this.selectedmodelNbr;
dialogRef.componentInstance.selectedDate = this.selectedDate;
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
console.log(dialogRef.componentInstance.closeMessage);
// Clear All Arrays
this.selectedAmount = undefined;
this.nextswitch = true;
this.DateDisabled = true;
this.ISDisabled = true;
this.modelDisabled = true;
this.SubmitDisabled = true;
this.AmountDisabled = false;
this.SigDisabled = true;
this.xpayresults = [];
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray = [];
const id = this.route.snapshot.paramMap.get('id');
this.selectedmodelNbr = 2;
// No need to change values as all will remain same except amount
});
}
ngOnInit() {
this.MakeService.changeUrlid(this.route.snapshot.paramMap.get('id'));
// returns the outstanding x Draw/Repay
const id = this.route.snapshot.paramMap.get('id');
this.databaseService.getxOut(id).subscribe(xoutresults => this.xoutresults = xoutresults);
// get the Make Level data
this.databaseService.getxLevel(id)
.subscribe(xLevelresults => this.xLevelresults = xLevelresults);
// Disable to ensure user enters correct data
this.SubmitDisabled = true;
this.DateDisabled = true;
this.SigDisabled = true;
// get data for the dynamically chose Make group
this.databaseService.getGroup(id)
.subscribe(MakeGroups => this.MakeGroups = MakeGroups);
// get today's and tomorrows's date
this.date = new Date();
this.tomorrow = (Date.now() + 86400000 );
// format tomorrow's date for the initial run (using tomorrow as this is in the Borrowing Base)
const d = new Date(this.tomorrow);
let ym = '' + (d.getMonth() + 1);
let yd = '' + d.getDate();
const yy = d.getFullYear();
if (ym.length < 2) {
ym = '0' + ym;
}
if (yd.length < 2) {
yd = '0' + yd;
}
const yformat = [yy, ym, yd].join('-');
}
}test-dialog.component.ts
import { AppRoutingModule } from './../../app-routing.module';
import { Component, OnInit } from '@angular/core';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';
import { Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { databaseService, NextxResult } from '../database.service';
import { TrackerResult } from '../database.service';
import { HttpClient } from '@angular/common/http';
import { element } from 'protractor';
import { ActivatedRoute, Router, RouterLink, Routes } from '@angular/router';
@Component({
selector: 'app-x-dialog',
templateUrl: './x-dialog.component.html',
styleUrls: ['../style.css']
})
export class xDialogComponent implements OnInit {
id: string;
nextxresults: Array<NextxResult>;
closeMessage: string;
constructor(
private databaseService: databaseService,
private route: ActivatedRoute,
private router: Router,
public dialogRef: MatDialogRef<xDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
onClose(): void {
// set the closeMessage property here
this.closeMessage = 'Pizza!';
this.dialogRef.close(5);
}
screenClick(val) {
console.log(val);
}
ngOnInit() {
this.databaseService.getNextx(this.id)
.subscribe(nextxresults => this.nextxresults = nextxresults);
}
}The console.log comes back as undefined, any idea why I am not getting "Pizza!"?
Updated with all the code for both files to hopefully add more insight into my issue. Really appreciate any help to get this sorted out!
答案 0 :(得分：1)
这是一种可行的解决方法，但不是正确的解决方案。你的代码应该按原样运行（according to the documentation），这样就会发生其他事情导致它破坏。如果代码中没有更多的上下文，则很难准确确定问题所在。现在，您可以试试这个：
export class TestDialogComponent implements OnInit {
id: string;
nextresults: Array<NextResult>;
closeMessage: string = "";
constructor(
...
public dialogRef: MatDialogRef<TestDialogComponent>,
...) { }
onClose(): void {
// set the closeMessage property here
this.closeMessage = "Pizza!";
this.dialogRef.close('ref');
}
...
}
openDialog() {
const id = this.route.snapshot.paramMap.get('id');
const dialogRef = this.dialog.open(TestDialogComponent, {
width: '880px' });
dialogRef.componentInstance.id = id;
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
// reference the closeMessage property here
console.log(dialogRef.componentInstance.closeMessage);
});
}
答案 1 :(得分：0)
bisect_right与期望的
返回值this.dialogRef.close(this.worksheetName.value)通过传递的值被调用组件A
this.dialogRef.afterClosed().subscribe组件B
addWorksheet(): void {
this.dialogRef = this.dialog.open(CreateWorksheetComponent, { width: '400px' });
this.afterClosed();
}
private afterClosed(): void {
this.dialogRef.afterClosed().subscribe((worksheetName: string) => {
console.log(worksheetName)
this.createWorksheet(worksheetName);
});
}
组件B HTML
createWorksheet(): void {
if (this.worksheetName.valid) {
this.dialogRef.close(this.worksheetName.value);
}
}
errorMessage(): void {
return Config.ErrorMessages.InvalidWorksheetName;
}
cancel(): void {
this.dialogRef.close();
}