Material2 Dialog: no component factory found,did you add it to @NgModule.entryComponents?
Material2のDialogを使う際に出たエラー。Dialogは他のと違ってややこしい、の備忘録。
いちおうDialog OVERVIEWのページに書いてある。まあ英語なのと、たいてい他のMaterialはサンプルコード見れば使い方わかるのでOVERVIEW読まないよね。
インプリの仕方
たとえばapp.componentのページにボタンを付けてそのボタンをクリックするとモーダルウィンドウ(Dialog)が出るようにしたかったら。
app.component.ts
import {MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
constructor(
public dialog: MatDialog,
) {}
// Mat-Dialogでedit-dialog.component(編集用モーダル)を開く
openDialog(post: Post) {
this.dialog.open(EditDialogComponent, {
width: '600px',
data: post,
disableClose: false
});
}
app.component.html
<button mat-raised-button (click)="openDialog(post)">編集</button>
postはObservableデータ。まあここではargumentに入れていろいろ渡せると思っておけばいい。このボタンをクリックするとDialogが開く。
Dialog画面用のコンポーネントを作る
EditDialogComponentはそのDialog画面を表示するコンポーネント。
ng g component editDialog
edit-dialog.component.ts
import { Component, OnInit, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
constructor(
public dialogRef: MatDialogRef<EditDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: Post
) { }
onClickCloseButton() {
this.dialogRef.close();
}
edit-dialog.component.html
<div>
<p>投稿者:{{data.userName}}のメッセージ編集</p>
<form #f="ngForm" (ngSubmit)="updatePost(data)" name="form">
…フォーム…
</form>
<br>
<button mat-raised-button (click)="onClickCloseButton()">閉じる</button>
</div>
このようにDialogの中にフォームを作ってデータベースを編集・削除できるようにしてもいいし、ただ警告メッセージを表示するだけでもいいし。
ちなみにフォームを使うなら<button mat-raised-button (click)="onClickCloseButton()">閉じる</button>
は<form></form>
の外に出さないと(ngSubmit)に反応していまいます。
問題はここから。
エラーの原因
MatDialogの場合、app.module.tsを編集しなければならない。
app.module.ts
//Material2モジュールのインポート
import {
MatDialogModule, // MatDialogに必要な記述
MAT_DIALOG_DEFAULT_OPTIONS, // MatDialogに必要な記述
} from '@angular/material';
declarations: [
EditDialogComponent,
],
providers: [
{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}} // MatDialogに必要な記述
],
entryComponents: [EditDialogComponent], // MatDialogに必要な記述
これは調べてもなかなかわからないっすー
以上
no component factory found,did you add it to @NgModule.entryComponents?