[解決済み] 角材のダイアログにデータを渡す方法 2
2023-02-10 22:02:56
質問
私は ダイアログボックス を使用しています。
開いたコンポーネントにデータを渡したい。以下は、ボタンをクリックするとダイアログボックスを開く方法です。
let dialogRef = this.dialog.open(DialogComponent, {
disableClose: true,
data :{'name':'Sunil'}
});
ドキュメントのページにはdataプロパティがありますが、インストールしたパッケージの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;
}
コンフィギュレーションクラスにdataプロパティはありません。
では、渡されたデータにアクセスするにはどうすればよいのでしょうか?
どのように解決するのか?
UPDATE 2 (Angular 5+)
この回答はかなり古くなっています。次のページを見てください。 の代わりにepiphanaticの回答を見てください。 .
最新情報
を使用することができます。
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
関連
-
[解決済み] Angular2の素材ダイアログに問題あり - @NgModule.entryComponentsに追加しましたか?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] Angular 2の "select "で新しい選択範囲を取得するにはどうすればよいですか?
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み] Angular + Material - データソース(mat-table)を更新する方法
-
[解決済み] Angular 2におけるEventEmitter.next()とEventEmitter.emit()の相違点
-
[解決済み] Angularで、コントロールが作成された後、FormControlにバリデータを追加する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] Angular 4/5/6 グローバル変数
-
[解決済み] angular-cliのパラメータ --base-href と --deploy-url の違いは何ですか?
-
[解決済み] プロパティ 'X' はプライベートであり、クラス 'xyzComponent' 内でのみアクセス可能です。
-
[解決済み] Error: モジュールによってインポートされた予期しない値 'undefined'。
-
[解決済み] Angular 2で入力タグのファイルタイプで選択されたファイルをリセットする方法は?
-
[解決済み] 角度の2つのスイッチケース値
-
[解決済み] Angular 2 - ルーティング - ObservableでCanActivateする。
-
[解決済み] エラー TS1192: モジュール '" A.module"' はデフォルトのエクスポートがありません。
-
[解決済み] APIレスポンスからレスポンスヘッダを読み取る - Angular 5 + TypeScript