Como passar dados para diálogo de material angular 2

Sunil Garg:

Estou usando a caixa de diálogo de material2 angular.

Quero passar dados para o componente aberto. Aqui está como estou abrindo a caixa de diálogo ao clicar em um botão

let dialogRef = this.dialog.open(DialogComponent, {
            disableClose: true,
            data :{'name':'Sunil'}
        });

Na página de documentação há propriedade de dados, mas eu verifiquei MdDialogConfig em meus pacotes instalados

/**
 * Configuration for opening a modal dialog with the MdDialog service.
 */
export declare class MdDialogConfig {
    viewContainerRef?: ViewContainerRef;
    /** The ARIA role of the dialog element. */
    role?: DialogRole;
    /** Whether the user can use escape or clicking outside to close a modal. */
    disableClose?: boolean;
    /** Width of the dialog. */
    width?: string;
    /** Height of the dialog. */
    height?: string;
    /** Position overrides. */
    position?: DialogPosition;
}

não há propriedade de dados na classe de configuração.

Agora, como posso acessar os dados transmitidos?

Fredrik Lundin:

ATUALIZAÇÃO 2 (Angular 5+)

Esta resposta está bastante desatualizada. Em vez disso, dê uma olhada na resposta do epifanático .

ATUALIZAR

Você pode usar dialogRef.componentInstance.myProperty = 'some data'para definir os dados em seu componente.

Você precisaria de algo assim:

let dialogRef = this.dialog.open(DialogComponent, {
            disableClose: true,
        });
dialogRef.componentInstance.name = 'Sunil';

Em seguida, DialogComponentvocê precisa adicionar name property:

...

@Component({
  ...
})
export class DialogComponent {
   public name: string;

   ...

}

O texto abaixo não é válido em versões mais recentes de @ angular / material

Não encontrei nenhuma documentação sobre isso, então comecei a pesquisar o código-fonte também. Por causa disso, pode não ser a maneira oficial de fazer.

Eu localizei os dados com sucesso em dialogRef._containerInstance.dialogConfig.data;

Então, o que você pode fazer é, por exemplo

let name = dialogRef._containerInstance.dialogConfig.data.name;
console.log(name); // Sunil

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

No Angular 8, como passar dados dinâmicos de um observável para um diálogo modal?

No Angular 8, como passar dados dinâmicos de um observável para um diálogo modal?

Como passar dados para o componente angular usando o componente de diálogo nebular?

Como passar dados no angular de diálogo 4

como passar dados para folha de fundo de material angular

Como rolar automaticamente para cima para a caixa de diálogo material2 angular2?

Como posso passar uma variável de serviço para uma caixa de diálogo de Material Angular?

Diálogo de Material Angular - Enviando dados para o diálogo

Como passar os dados da API HTTP GET para o componente da caixa de diálogo do angular

Como posso passar dados de um fragmento de host para fragmento de diálogo no kotlin?

Como passar e acessar dados de um componente de diálogo no angular?

Como passar dados da classe do adaptador para o fragmento de diálogo da folha inferior

Precisa de ajuda para passar a variável para o diálogo no Angular 2

Como passar dados com classe de dados de um fragmento de diálogo para outro fragmento com interface em kotlin?

como passar um valor para outro componente de diálogo em angular

Como passar o componente angular para o serviço de diálogo nebular

Como passar dados para $ mdDialog em material angular

Como passar dados para $ mdDialog em material angular

Como usar o material angular2 Diálogo para bloquear para canDeactivate

flutter: como passar valor para uma caixa de diálogo?

Como evitar a rolagem para baixo na caixa de diálogo de material angular?

Obtenha dados do diálogo de material angular

Como posso passar dados de um cartão, em uma lista de cartões, para um diálogo?

tamanho da caixa de diálogo md Material para solução de problemas do Angular 2

Como simplificar o uso do diálogo de material angular?

Como criar uma forma validada no diálogo de material angular

Angular2 - Não passa dados para a caixa de diálogo modal

Como passar dados recebidos de dataService de pai para filho em Angular2

Como podemos passar dados na caixa de diálogo da interface do usuário do material durante o clique no botão Ok

TOP lista

  1. 1

    R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

  2. 2

    UITextView não está exibindo texto longo

  3. 3

    Dependência circular de diálogo personalizado

  4. 4

    Acessando relatório de campanhas na AdMob usando a API do Adsense

  5. 5

    Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

  6. 6

    R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

  7. 7

    Setas rotuladas horizontais apontando para uma linha vertical

  8. 8

    O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

  9. 9

    Definir um clipe em uma trama nascida no mar

  10. 10

    Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

  11. 11

    Como dinamizar um Dataframe do pandas em Python?

  12. 12

    regex para destacar novos caracteres de linha no início e no fim

  13. 13

    Why isn't my C# .Net Core Rest API route finding my method?

  14. 14

    Como obter a entrada de trás de diálogo em treeview pyqt5 python 3

  15. 15

    Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

  16. 16

    How to create dynamic navigation menu select from database using Codeigniter?

  17. 17

    Como recuperar parâmetros de entrada usando C #?

  18. 18

    Changing long, lat values of Polygon coordinates in python

  19. 19

    Livros sobre criptografia do muito básico ao muito avançado

  20. 20

    Método \ "POST \" não permitido no framework Django rest com ações extras & ModelViewset

  21. 21

    Pesquisa classificada, conte números abaixo do valor desejado

quentelabel

Arquivo