关闭里面的 md-dialog component.ts

Question

我有一个 md-dialog 组件 - DialogComponent - 我从兄弟组件打开 - SiblingComponent - 我想在一些操作后在 dialog.component.ts 中关闭它。

DialogComponent 基本上是一个带有提交按钮的表单，提交表单会将我带到 dialog.component.ts 函数，我正在其中进行一些验证并将数据发送到服务。

验证通过并发送数据后，我想超时，然后自动关闭拨号 window，但我不知道如何运行 md-dialog-close 之类的东西 dialog.component.ts

Answer 1

您需要通过在父级中使用 @ViewChild(MyComponent) myComponent; 来获取对您要访问的组件的引用。

您需要使用 @Output() event = new EventEmitter(); 从 1 个同级向父级发出事件，然后在父级中您可以使用它的引用访问另一个同级。

（不需要@Output()，也可以在父组件@ViewChild(SiblingOneComponent) & @ViewChild(SiblingTwoComponent) 中创建两个引用，在子组件中创建一个变量：parentComponent: ParentComponent。和使用 SiblingOneComponent.parentComponent = this;

设置它（在父级中）

Answer 2

您可以将 MdDialogRef 注入 对话框组件 class，然后使用它来关闭它。示例：

export class DialogComponent {

    constructor(private dialogRef: MdDialogRef<DialogComponent >) { }

    someAction() {
        // do your thing here
        this.dialogRef.close(); // <- this closes the dialog. 
        // You can also wrap it in setTimeout() if you want
    }
}

Answer 3

我来到这里是为了寻找类似的情况，但对于 MatDialog

我的情况是我有一个 MatDialog 包含一个 EditParkingDialogComponent 包含一个 ParkingFormComponent，为什么这么复杂？因为我正在重用 ParkingFormComponent 用作表单或对话框。

我需要的是在 ParkingFormComponent 中更新帕金时关闭主要 MatDialog，例如保存数据时。

这是我所做的：

在 ParkingFormComponent.component.ts 中，我在停车场更新时发出一个事件

  @Output()
  parkingUpdated: EventEmitter<any> = new EventEmitter<any>();

  updateParking() {
    .....
    this.parkingUpdated.emit();
  }

在EditParkingDialogComponent.component.ts（中间部分）

  constructor(private dialogRef: MatDialog) { }

  onParkingUpdated() {
      this.dialogRef.closeAll();
  }

在EditParkingDialogComponent.component.html

<app-parking-form [mode]="formMode" [parkingModel]="currentParking" (parkingUpdated)="onParkingUpdated()"></app-parking-form>

关闭里面的 md-dialog component.ts

Close md-dialog inside it's component.ts

mddialog

angular-material2

angular