Закройте md-диалог внутри его component.ts

У меня есть компонент md-dialog — DialogComponent — который я открываю из родственного компонента — SiblingComponent — и я хочу закрыть его в dialog.component.ts после некоторых действий.

DialogComponent в основном представляет собой форму с кнопкой отправки, отправка формы приводит меня к функции dialog.component.ts, где я выполняю некоторую проверку и отправляю данные в службу.

После прохождения проверки и отправки данных я хочу сделать тайм-аут, а затем автоматически закрыть окно набора номера, но я не знаю, как запустить что-то вроде md-dialog-close в dialog.component.ts


angular angular-material2 mddialog
person esquarial    schedule 24.08.2017    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Вы можете внедрить MdDialogRef в класс диалогового компонента и использовать его, чтобы закрыть его. Пример:

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
    }
}
person Andrei Matracaru    schedule 24.08.2017
comment
он пытается получить свой dialogRef из разных компонентов - person Carsten; 24.08.2017
comment
на самом деле нет, я пытаюсь получить dialogRef из DialogComponent :) - person esquarial; 24.08.2017
comment
Это ответ, чем вы так много - person esquarial; 24.08.2017

arrow_upward
0
arrow_downward

Я прибыл сюда в поисках аналогичной ситуации, но для MatDialog

Мой сценарий заключается в том, что у меня есть MatDialog, который содержит, и EditParkingDialogComponent, который содержит ParkingFormComponent, почему так сложно? потому что я повторно использую ParkingFormComponent для использования в качестве формы или в диалоговом окне.

Мне нужно было закрыть основной MatDialog, когда паркин был обновлен в ParkingFormComponent, например, когда данные были сохранены.

Вот что я сделал:

В 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>
person Mauricio Gracia Gutierrez    schedule 04.05.2020

arrow_upward
-2
arrow_downward

Вам нужно получить ссылку на компонент, к которому вы хотите получить доступ, используя @ViewChild(MyComponent) myComponent; в родительском компоненте.

От 1 брата вам нужно передать событие родителю, используя @Output() event = new EventEmitter();, а затем в родителе вы можете получить доступ к другому брату, используя его ссылку.

(вам не нужен @Output(), вы также можете создать две ссылки в родительском @ViewChild(SiblingOneComponent) и @ViewChild(SiblingTwoComponent) и переменную в дочернем компоненте: parentComponent: ParentComponent. и установить ее (в parent) с помощью SiblingOneComponent.parentComponent = this;

person Carsten    schedule 24.08.2017
comment
Я не думаю, что это то, о чем спрашивает ОП. Он просто хочет закрыть экземпляр диалога из своего класса компонента диалога. - person Andrei Matracaru; 24.08.2017