角度材质对话框模态错误

时间:2017-10-26 10:48:34

标签: angular angular-material angular-material2

这是第一次使用角度4和材质设计,我试图用角度材料设计创建一个模态窗口,并有这两个文件:

roomlist.component

import { Component, OnInit, Inject } from '@angular/core';
import { RoomService } from '../../services/room.service';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { RoomDialogComponent } from './dialogs/roomDialogs/room.dialog';


@Component({
  selector: 'app-roomlist',
  templateUrl: './roomlist.component.html',
  styleUrls: ['./roomlist.component.css']
})
export class RoomlistComponent implements OnInit {
  public rooms: any;
  public roomsFilter = {
    date: new Date,
    aviable: 'all',
    globalSeach: ''
  };
  constructor(public roomService: RoomService, public dialog: MatDialog) {
  }

  ngOnInit() {
    this.getData();
  }

  public getData(): any {
    console.log(this.roomsFilter.date);
    this.roomService.getRooms({ date: 'now' })
      .then((res) => {
        this.rooms = res;
        console.log(this.rooms);
      });
  }

  public openDialog(event, room): void {
    const dialogRef = this.dialog.open(RoomDialogComponent, {
      width: '250px',
      data: room
    });

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

}

和这一个: room.dialog

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

/**
 * @title Dialog Overview
 */

@Component({
  selector: 'app-room-dialog',
  templateUrl: './room.dialog.html',
})
export class RoomDialogComponent {

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

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

}

当我按下一个触发openDIalog功能的按钮时,该模式应该会打开但是会显示此错误消息No component factory found for RoomDialogComponent. Did you add it to @NgModule.entryComponents?

任何想法

1 个答案:

答案 0 :(得分:4)

你做错误说的是什么?

您是否将其添加到条目组件????

@NgModule({
entryComponents: [
    YourDialogComponent
  ]
})