web-dev-qa-db-ja.com

入力値をダイアログコンポーネントに渡す

私はmaterial2のダイアログコンポーネントを実装していて、この問題に直面しました：

すべての確認タイプのメッセージの汎用ダイアログを作成します。開発者は、ビジネス要件に従ってダイアログにテキストを入力できます。しかし docs のように、そのような規定はありません。同じことの回避策はありますか、それとも機能リクエストとしてgithubに投稿する必要がありますか？

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);
angularangular2-material
15
Sumit Agarwal

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);
  }

次に、明らかにあなたができるDialogOverviewExampleDialogテンプレートの中で：

   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>
20
Milad