Использование данных MdDialogConfig в Angular 2

Я пытаюсь использовать компонент диалога в Angular 2, используя @angular/material2.0.0-beta.1. То, что я пытаюсь выполнить, - это отправить данные (значения, которые человек выбирает из интерфейса, диалоговое окно используется, чтобы заставить человека подтвердить выбранные значения) в диалоговое окно и отобразить его. Так, например, диалог должен сказать что-то вроде этого:

Вы выбрали:

вариант 1: значение

вариант 2: значение

вариант 3: значение

Отменить | Подтверждать

Как я могу передать эти значения в диалоговое окно, которое я создаю, чтобы я мог просто получить к ним доступ, например {{value}} в шаблоне представления? Я думаю, что он использует конфигурацию данных, но я не могу найти хорошую документацию или примеры того, как ее использовать. Вот что я пытался:

let config = new MdDialogConfig().data();
let dialogRef = this.dialog.open(DialogComponent);

ДиалогКомпонент

import { Component } from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
   selector: 'dialog',
   template: require('./dialog.component.pug'),
   styleUrls: [
     './dialog.component.scss'
   ]
})

export class DialogComponent {
   constructor(public dialogRef: MdDialogRef<DialogComponent>) {}
}

angular angular-material mddialog
person Tuco    schedule 28.02.2017    source источник

Ответы (3)


arrow_upward
16
arrow_downward

В родительском компоненте:

const config = new MdDialogConfig();

config.data = [
  // for example:
  'value 1',
  'value 2'
];

const dialogRef = this.dialog.open(DialogComponent, config);

DialogComponent:

import { Component, OnInit } from '@angular/core';
import { MdDialogRef }       from '@angular/material';

@Component({
  selector: 'dialog',
  template: require('./dialog.component.pug'),
  styleUrls: [
    './dialog.component.scss'
  ]
})
export class DialogComponent implements OnInit {
  private values;

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

  ngOnInit(): void {
    this.values = this.dialogRef.config.data;
  }
}

И образец шаблона (HTML-версия):

<md-dialog-content>
  <md-list *ngIf="values">
    <md-list-item *ngFor="let value of values">{{ value }}</md-list-item>
  </md-list>
</md-dialog-content>

Обновление — @angular/material 2.0.0-бета.3

Начиная с версии 2.0.0-beta.3 Angular Материал, больше невозможно получить доступ к свойству config (и config.data) MdDialogRef<T>. Вместо этого вы должны ввести токен MD_DIALOG_DATA для доступа к любым данным, переданным в ваш диалоговый компонент.

Импорт:

import { Component, Inject, OnInit, Optional } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef }         from '@angular/material';

Конструктор:

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

ngOnInit метод:

ngOnInit(): void {
  // alternatively, rename ‘dialogData’ to ‘values’ and remove the
  // ‘ngOnInit’ method
  this.values = this.dialogData;
}

Во многих случаях вам придется оставить декоратор @Optional() до тех пор, пока не будет решена проблема 4086. .

person gsc    schedule 01.03.2017

arrow_upward
2
arrow_downward

Обновление: обязательно используйте указанный выше метод Inject для получения данных. Этот способ зависит от доступа к частному члену, который не гарантируется неприкосновенностью между версиями

Если вы используете новую бета-версию 2.0.0 3 (или, может быть, она была даже изменена в бета-версии 2, не уверен), то приведенный выше ответ нужно немного изменить:

@Component({
selector: "dialog",
templateUrl: "./dialog.component.html"
})
export class DialogComponent {
    constructor(public dialogRef: MdDialogRef<DialogComponent>) { }
    type: string;
    name: string;
    ngOnInit(): void {
        let configData: any = this.dialogRef._containerInstance.dialogConfig.data;
        this.type = configData.type;
        this.name = configData.name;
   }
}

Кажется, должен быть лучший способ ссылки на данные, чем this.dialogRef._containerInstance.dialogConfig.data, но я не смог его найти.

person Rory Fuhrer    schedule 11.04.2017

arrow_upward
2
arrow_downward

Другой способ — установить значения из родительского компонента DialogComponent.

@Component({
selector: "dialog",
templateUrl: "./dialog.component.html"
})
export class DialogComponent {
    constructor(public dialogRef: MdDialogRef<DialogComponent>) { }
    type: string;
    name: string;
    ngOnInit(): void {

   }
}

Родительский компонент

let dialogRef = this.dialog.open(DialogComponent);
dialogRef.componentInstance.type= title;
dialogRef.componentInstance.name= url;
person happy    schedule 19.04.2017