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
}

将值从模态子组件更新为角度为8的父组件

1 个答案: