각도 물질의 대화 상자에 데이터를 전달하는 방법 2

각도 물질의 대화 상자에 데이터를 전달하는 방법 2

저는 각진 소재 2의 대화 상자를 사용하고 있습니다.

저는 열려 있는 부품에 데이터를 전달하고 싶습니다.단추를 클릭하여 대화 상자를 여는 방법은 다음과 같습니다.

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

설명서 페이지에 데이터 속성이 있지만 설치된 패키지에서 MdDialogConfig를 선택했습니다.

/**
 * 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;
}

구성 클래스에 데이터 속성이 없습니다.

이제 어떻게 통과된 데이터에 액세스할 수 있습니까?

최신 버전의 대화상자(Angular 5 이전 버전, 5의 경우 아래 업데이트 참조)의 경우 다음을 수행하여 훨씬 간단하고 깨끗한 구성을 통해 데이터를 전달할 수 있습니다.

대화 상자를 열 때 데이터를 구성 매개 변수로 추가하여 이를 수행할 수 있습니다(설명 목적으로 있는 너비와 높이는 무시하십시오).

this.dialogRef = this.dialog.open(someComponent, {
  width: '330px',
  height: '400px',
  data: {
    dataKey: yourData
  }
});

그런 다음 대화 상자에 열려 있는 구성 요소에서 다음과 같이 액세스할 수 있습니다.

import {MAT_DIALOG_DATA} from '@angular/material';
import { Inject } from '@angular/core';


constructor(
   @Inject(MAT_DIALOG_DATA) public data: any
) { }

ngOnInit() {
  // will log the entire data object
  console.log(this.data)
}

또는 템플릿이나 다른 방법으로 액세스할 수 있지만 요점을 알 수 있습니다.

Angular 5에 대한 업데이트

재료의 모든 내용이 Md에서 Mat으로 변경되었으므로 Angular 5에서 다음과 같이 가져옵니다.

import {MAT_DIALOG_DATA} from '@angular/material'

그다음에 이렇게 주사를.

@Inject(MAT_DIALOG_DATA) public data: any

Angular 9에 대한 업데이트

MAT_DIALOG_DATA 가져오기 위치가 다음으로 변경되었습니다.

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

저는 아직도 배우고 있는 우리들을 위해 더 완전한 답을 줄 것이라고 생각했습니다.

재료 예제와 달리 디버깅을 쉽게 하기 위해 대화 상자에 자체 구성 요소 파일(html, css 및 ts)이 있도록 구성했습니다.

주 구성 요소 파일 "x.component.ts"(대화 상자 호출)

가져오기 문 추가

import { MatDialog} from '@angular/material';

생성자 매개변수에 속성 추가

public dialog: MatDialog

대화 상자를 호출할 코드 정의

  openDialog(title: string, text: string): void {
const dialogRef = this.dialog.open(DialogComponent, {
  width: '350px',
  data: {dialogTitle: title, dialogText: text}
);

dialogRef.afterClosed().subscribe(result => {
});

  const dialogSubmitSubscription = 
  dialogRef.componentInstance.submitClicked.subscribe(result => {
  dialogSubmitSubscription.unsubscribe();
});

}

openDialog()를 사용하여 HTML 파일에서 함수를 호출합니다.DialogComponent를 참조하고 있으므로 모듈로 가져오는지 확인하십시오.

import { DialogComponent } from './dialog/dialog.component';

또한.

entryComponents: [DialogComponent]

항목 구성요소 배열에 선언

dialog.component.ts 파일에서 가져오기를 추가합니다.

import { Component, Output, EventEmitter, Inject, OnInit} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

속성 및 기능 정의

dialogTitle: string;
dialogText: string;
@Output() submitClicked = new EventEmitter<any>();

  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}


  ngOnInit() {
    this.dialogTitle = this.data.dialogTitle;
    this.dialogText = this.data.dialogText;
  }

  saveMessage() {
    const data = 'Your data';
    this.submitClicked.emit(data);
    this.dialogRef.close();
  }

  closeDialog() {
    this.dialogRef.close();
  }

그리고 마지막으로 HTML.

<h1 mat-dialog-title>{{dialogTitle}}"</h1>
<div mat-dialog-content>
  <p>{{dialogText}}</p>

</div>
<div mat-dialog-actions>
  <button mat-button (click)="saveMessage()" >Ok</button>
  <button mat-button (click)="closeDialog()" cdkFocusInitial>No Thanks</button>

</div>

도움이 되길 바랍니다.

업데이트 2(앵글 5+)

이 대답은 다소 구식입니다.대신에 깨달음의 답을 보세요.

갱신하다

사용할 수 있습니다.dialogRef.componentInstance.myProperty = 'some data'구성 요소의 데이터를 설정합니다.

다음과 같은 것이 필요합니다.

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

그럼 당신의DialogComponent추가해야 합니다.name property:

...

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

   ...

}

아래 텍스트는 최신 버전의 @angular/material에서 사용할 수 없습니다.

저는 이것에 대한 문서를 찾지 못해서 소스 코드도 조사하기 시작했습니다.그렇기 때문에, 이것은 공식적인 방법이 아닐 수도 있습니다.

으로 로찾다니데았를에서 데이터를 .dialogRef._containerInstance.dialogConfig.data;

그래서 당신이 할 수 있는 것은 예를 들어.

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

Angular 13의 경우 대화 상자 데이터 구조로 객체를 전달하기 위해 다음을 사용해야 했습니다.

const dialogRef = this.dialog.open(MyDialog, {
  data: { myObjectHolder: myObject }
});

그런 다음 대화 상자 클래스에서 다음을 사용합니다.

private myObject: MyObjectClass;

constructor(@Inject(MAT_DIALOG_DATA) data: { myObjectHolder: MyObjectClass }) {
    this.myObject = data.myObjectHolder;
}

각도 10 또는 11에 대해 이것을 찾는 사람들에게 유일한 차이점은 다음을 사용한다는 것입니다.

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

다음 대신:

import {MAT_DIALOG_DATA } from '@angular/material';

공식 페이지는 여기 있습니다.

그래서 메소드를 추가했는데 한 구성 요소에서 작동하지만 대화 상자(다른 구성 요소)를 만들려면 작동하지 않습니다.

테이블의 구성 요소 및 삭제 버튼

  openDeleteDialog(user) {
    this.dialog.open(DeleteUserDialogComponent, {
      width: '30%', disableClose: true, data: user
    });
  }

구성 요소 대화 상자

export class DeleteUserDialogComponent {

  dataSource = new MatTableDataSource();

  constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<DeleteUserDialogComponent>, private userService: UserService, @Inject(MAT_DIALOG_DATA) public data: any) {}


  deleteUser() {
    this.dataSource.data.splice(this.dataSource.data.indexOf(this.data), 1);
    this.dataSource.data = [...this.dataSource.data];
    console.log(this.dataSource.data);
    console.log(this.data)
  }

  click(): void {
    this.dialogRef.close();
  }
}

HTTP 데이터에 대한 대화 상자를 사용하는 경우 RxJS 및 관찰 가능 항목이 이 문제에 적합합니다.

대화 상자 서비스:

    private _dialogDataSubj$ = new Subject<DialogData>();
    dialogData$ = this._dialogDataSubj$.asObservable()

    setDialogData(data: DialogData) {
        this._dialogDataSubj$.next(data)
    }

HTML 대화 상자에서:

<ng-container *ngIf="dialogData$ | async as data; else doneTmp">

나만 그런 것인지는 잘 모르겠지만, 대화 상자 데이터 참조(@Inject)만으로는 재료 대화 상자의 데이터를 업데이트할 수 없었습니다. 즉:dialogRef.data = newData.

언급URL : https://stackoverflow.com/questions/42664974/how-to-pass-data-to-dialog-of-angular-material-2