时间戳

首页 > 解决方案 > Angular 10 / 如何在具有 2 个类的 1 个文件之间共享 1 个变量 / Angular Material Dialog 组件

angular - Angular 10 / 如何在具有 2 个类的 1 个文件之间共享 1 个变量 / Angular Material Dialog 组件

问题描述

我正在使用具有以下结构的 Angular Material Dialog 组件：

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

export interface DialogData {
  animal: string;
  name: string;
}

/**
* @title Dialog Overview
*/
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
})
export class DialogOverviewExample {

 animal: string;
 name: string;

constructor(public dialog: MatDialog) {}

openDialog(): void {
 const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
   width: '250px',
   data: {name: this.name, animal: this.animal}
});

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

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

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

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

 }

如您所见，它有 2 个类，但只有 1º 类包含在父组件 .html 中

 <app-filter-modal [requestForm]="requestForm" [name]="name" 
 [animal]="animal"></app-filter-modal>

我需要链接出一个@Input，一个父组件变量与同名的 2º 类（创建模态窗口本身的类）变量：

[requestForm]="requestForm"

但是我得到了一个错误，因为我不能在 2º 类选择器中包含上面的行，因为 Angular Material Dialog 不能这样工作。

如何将父组件变量requestForm与具有相同名称 ( requestForm ) 的 2º 类 Angular Material Dialog 变量相关联。我的第一个想法是在包含两者的文件中的两个类之间共享变量。

标签： angularangular-material

解决方案

就像您对“名称”和“动物”所做的那样。（尽管缺少 @Input 装饰器）

将 requestForm 添加到 DialogData

export interface DialogData {
  animal: string;
  name: string;
  requestForm: any;
}

在对话框打开器组件中创建输入。

@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
})
export class DialogOverviewExample {
 @Input() requestForm: string;

打开时发送到对话框

openDialog(): void {
 const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
   width: '250px',
   data: {
     name: this.name, 
     animal: this.animal,
     requestForm: this.requestForm
   }
});

推荐阅读