从模态子组件更新值到父组件角度 8

Question

我有打开模式的父组件。 （子组件）。

parent.ts 文件：-

    @Component({
      selector: 'app-parent',
      templateUrl: './parent.component.html',
      styleUrls: ['./parent.component.scss']
    })
    export class ParentComponent implements OnInit, OnChanges {

     faCheck = faCheck;

     verticalArr = ['course completed',
        'attendance',
        'new attendance',
        'trainer',
        'view'];

     horizontalArr = ['time', 'city'];

    constructor(private reportService: ReportService, private router: Router, private dialog: MatDialog) {
      }

     openDialog() {
        const dialogConfig = new MatDialogConfig();
        dialogConfig.disableClose = true;
        dialogConfig.autoFocus = true;
        this.dialog.open(XmodalComponent, {
          height: '50%', width: '100%',
            data: this.horizontalArr
          });
      }

      openDialog2() {
        const dialogConfig = new MatDialogConfig();
        dialogConfig.disableClose = true;
        dialogConfig.autoFocus = true;
        this.dialog.open(YmodalComponent, {
          height: '50%', width: '100%',
            data: this.verticalArr
          });
      }
    }

子组件（模态）：-

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { faCheck } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-xmodal',
  templateUrl: './xmodal.component.html',
  styleUrls: ['./xmodal.component.scss']
})
export class XmodalComponent implements OnInit {
  faCheck = faCheck;
  selectedItems = [];
  selectedHorizontalValue: string;

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

  xarray = this.data;

  ngOnInit() {
    // will log the entire data object
  console.log(this.xarray);
  }

  onHorizontalAxisSelect(key) {
    this.selectedItems = [];
    this.selectedHorizontalValue = key;
  }

  getSelectedHorizontalAxis() {
    console.log(this.selectedHorizontalValue); //<=== (select from button click either time or city
    return this.selectedHorizontalValue;
  }
}

子 html（模态）：-

选择水平轴

<div class="axis-selection">
    <div class="menu">
        <ng-container *ngFor="let key of xarray">
            <button (click)="onHorizontalAxisSelect(key)"
                [ngClass]="{ 'selected': key === getSelectedHorizontalAxis() }">{{key}} &nbsp;&nbsp;
                <fa-icon *ngIf=" key === getSelectedHorizontalAxis() " [icon]="faCheck"></fa-icon></button>
        </ng-container>
    </div>
</div>

（与 ycomponent 模态相同）

因此，子组件中的this.selectedHorizontalValue 包含选定的值。如何将此值传递给父组件并将其存储在新变量中或使用相同的变量名存储，即； this.selectedHorizontalValue??

对不起，我是打字稿学习的新手。

Answer 1

非常粗略，但根据您的代码，
应应用以下修改。

parent.ts:

// Code omission
export class XmodalComponent implements OnInit {
  // Code omission

  openDialog() {
    // Code omission
    const dialogRef = this.dialog.open(XmodalComponent, { // Changed line
      height: '50%', width: '100%',
        data: this.horizontalArr
      });
    dialogRef.afterClosed().subscribe(result => { // New line
      this.answerFromModel = result; // New line. Need to declare answerFromModel in class
    });
  }
  // Code omission
}

child.ts:

// Code omission
export class XmodalComponent implements OnInit {
  // Code omission

  onHorizontalAxisSelect(key) {
    this.selectedItems = [];
    this.selectedHorizontalValue = key;
    this.dialogRef.close(this.selectedHorizontalValue) // New line. Not sure when you want to close your modal... Maybe this line should be at other place
  }
  // Code omission
}