Получить данные из md-dialog на Angular4

Я реализую md-dialag из Material Design в своем приложении Angular 4. В настоящее время мне удалось передать данные в модальное окно, но мне не удалось получить какие-либо данные, введенные пользователем в диалоговом окне.

Вот как я открываю диалог:

ShowAddStop() {
    this.general = {fc: this.locationCtrl, fl: this.filteredLocations, selectedNewStop:this.selectedNewStop};
    let dialogRef = this.dialog.open(DialogAddStop,{data:this.general});
    dialogRef.afterClosed().subscribe(result => {
        console.log(result);
    });
}

Но, например, в диалоговом окне у меня есть поле ввода, которое я хочу, чтобы пользователь заполнил:

<input [(ngModel)]="ShortName">

Если Shortname — это переменная в классе, из которого я вызвал диалог, он не изменит эту переменную, я думаю, что он создает свою собственную область видимости, и поэтому он не использует переменные экземпляра моего класса.

Есть ли что-то основное, чего мне не хватает при извлечении данных из диалогового окна?


angular angular2-services mddialog
person Multitut    schedule 08.06.2017    source источник
comment
Как диалог закрывается?   -  person gsc    schedule 08.06.2017
comment
например: ‹button md-button md-dialog-close=0›Отмена‹/button›   -  person Multitut    schedule 08.06.2017

Ответы (1)


arrow_upward
4
arrow_downward

Сначала получите ссылку MdDialogRef<DialogAddStop> и токен MD_DIALOG_DATA в конструкторе диалогового окна:

constructor(
  @Inject(MD_DIALOG_DATA) private dialogData: any,
  private dialogRef: MdDialogRef<DialogAddStop>
) {}

См. также Использование данных MdDialogConfig в Angular 2 для некоторых объяснений относительно MD_DIALOG_DATA.

Создайте переменную shortName внутри класса диалогового окна:

public shortName: string

Установите начальное значение shortName на значение, предоставленное родительским компонентом:

public ngOnInit(): void {
  this.shortName = this.dialogData['shortName']
}

Создайте «сохраняющий» обработчик:

public onSave() {
  this.dialogRef.close(this.shortName)
}

Прикрепите этот обработчик к кнопке Сохранить:

<button (click)="onSave()" md-button>Save</button>
person gsc    schedule 08.06.2017
comment
Спасибо! но как мне получить эту переменную в классе, из которого я вызвал диалог? (кстати, он работает внутри диалогового метода onSave()) - person Multitut; 08.06.2017
comment
Вы пробовали подписаться на dialogRef.afterClosed() и прочитать результат? - person gsc; 09.06.2017