입력 값을 대화 상자 구성 요소로 전달

입력 값을 대화 상자 구성 요소로 전달

이 질문은 이미 다음과 같은 해답을 가지고 있다.

각도 2.0 재료 MdDialog의 작업 예제 (1개 답변)

닫힌5년 전.

나는 material2의 대화 구성요소를 구현하고 있으며 이 문제에 직면했다.

모든 확인 유형의 메시지에 대한 일반 대화 상자를 만들고 싶다. 여기서 개발자는 비즈니스 요구 사항에 따라 대화 상자에 텍스트를 입력할 수 있다.그러나 문서에 따르면 그러한 조항은 없다.같은 일을 하는 건가, 아니면 기둡에 특집 요청으로 게시해야 하나?

export class ConfirmationDialogComponent implements OnInit {
  @Input() confirmationText: string;
  @Input() confirmationTitle: string;
  @Input() confirmationActions: [string, string][] = [];

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

  ngOnInit() {}
}

이렇게 전화하는 경우:

let dialogRef = this.dialog.open(ConfirmationDialogComponent);

open은 당신에게 구성요소 인스턴스를 제공할 것이다. 즉, 당신이 원하는 것을 이렇게 주입할 수 있다는 것을 의미한다.

openDialog() {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog);
    let instance = dialogRef.componentInstance;
    instance.text = "This text can be used inside DialogOverviewExampleDialog template ";
    console.log('dialogRef',dialogRef);
  }

그렇다면 DialogOverview 내부는 분명히예제할 수 있는 대화 상자 템플릿:

   this is the text {{text }}

플런커

일반적으로 구성 요소가 이해하는 구성 개체를 만든 다음 모달(모달)을 열 때 전달:

 private config = {
    title :"Hello there ",
    text :"What else ? "
 };

 openDialog() {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog);
    let instance = dialogRef.componentInstance;
    instance.config = this.config;
    console.log('dialogRef',dialogRef);
  }

모달 구성 요소 내부:

<div class="my-modal">
   <h1>{{config.title}}</h1>
   <p>{{config.text}}</p>
</div>

참조URL: https://stackoverflow.com/questions/41357021/passing-input-values-to-dialog-component