无法在 Angular 4 中将 Angular Material 弹出对话框作为单独的组件实现

Question

我正在尝试使用 Angular 4 和 Angular cli 构建实现弹出窗口 - 所有最新版本。

到目前为止，我几乎完全遵循了这个 Plunker 的代码：https://plnkr.co/edit/Dh9INs7QZPatSyhHywJc?p=preview

但我想为实际的弹出对话框使用一个单独的组件，这样我就可以更好地设置它的样式，使其适合快速扩展的网络应用程序的模块化架构。

我的app.module代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { routes } from './app.router';

import 'hammerjs';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MdInputModule, MdButtonModule, MdToolbarModule, MdMenuModule, MdGridListModule, MdDialogModule } from '@angular/material';


import { CommissionMeComponent } from './commission-me/commission-me.component';
import { CommissionMeDialogComponent } from './commission-me-dialog/commission-me-dialog.component';


@NgModule({
  declarations: [
    CommissionMeComponent,
    CommissionMeDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MdInputModule,
    MdButtonModule,
    MdToolbarModule,
    MdMenuModule,
    MdDialogModule,
    routes
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的组件 html 带有调用对话框的按钮的组件：

<button (click)="openDialog()">Launch dialog</button>

My Component ts 用于带有调用对话框的按钮的组件：

import { Component } from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

import { CommissionMeDialogComponent } from '../commission-me-dialog/commission-me-dialog.component';

@Component({
  selector: 'app-commission-me',
  templateUrl: './commission-me.component.html',
  styleUrls: ['./commission-me.component.css']
})

export class CommissionMeComponent {

  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open(CommissionMeDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}

对话框组件的我的组件html：

<h1>Dialog</h1>

对话框组件的我的组件 ts：

import { Component } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';

@Component({
  selector: 'app-commission-me-dialog',
  templateUrl: './commission-me-dialog.component.html',
  styleUrls: ['./commission-me-dialog.component.css']
})


export class CommissionMeDialogComponent {
  constructor(public dialogRef: MdDialogRef<CommissionMeDialogComponent>) {}
}

当我单击按钮调用对话框时，我看到的只是浏览器左侧下方的一个灰色薄薄的东西 window - 这是一个对话框，但没有文本。

这些是 Chrome 控制台中的错误：

CommissionMeComponent.html:3 ERROR Error: No component factory found for CommissionMeDialogComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.es5.js:3202)
    at CodegenComponentFactoryResolver.webpackJsonp.../../../core/@angular/core.es5.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.es5.js:3267)
    at PortalHostDirective.webpackJsonp.../../../cdk/@angular/cdk.es5.js.PortalHostDirective.attachComponentPortal (cdk.es5.js:2706)
    at MdDialogContainer.webpackJsonp.../../../material/@angular/material.es5.js.MdDialogContainer.attachComponentPortal (material.es5.js:17625)
    at MdDialog.webpackJsonp.../../../material/@angular/material.es5.js.MdDialog._attachDialogContent (material.es5.js:17901)
    at MdDialog.webpackJsonp.../../../material/@angular/material.es5.js.MdDialog.open (material.es5.js:17813)
    at CommissionMeComponent.webpackJsonp.../../../../../src/app/commission-me/commission-me.component.ts.CommissionMeComponent.openDialog (commission-me.component.ts:19)
    at Object.eval [as handleEvent] (CommissionMeComponent.html:3)
    at handleEvent (core.es5.js:12004)
    at callWithDebugContext (core.es5.js:13465)
View_CommissionMeComponent_0 @ CommissionMeComponent.html:3
proxyClass @ compiler.es5.js:14971
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13405
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:9217
(anonymous) @ platform-browser.es5.js:2651
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1370
globalZoneAwareCallback @ zone.js:1388
CommissionMeComponent.html:3 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…}}
View_CommissionMeComponent_0 @ CommissionMeComponent.html:3
proxyClass @ compiler.es5.js:14971
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13405
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1085
(anonymous) @ core.es5.js:9217
(anonymous) @ platform-browser.es5.js:2651
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1370
globalZoneAwareCallback @ zone.js:1388

Answer 1

您缺少对话框的入口组件。在您的应用模块中，添加以下内容：

declarations: [
    CommissionMeComponent,
    CommissionMeDialogComponent
  ],
  entryComponents: [CommissionMeDialogComponent]

Answer 2

确保您在开发控制台中没有下一个警告Could not find Angular Material core theme. Most Material components may not work as expected.

如果是，请将 @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; 添加到您的 css 文件

无法在 Angular 4 中将 Angular Material 弹出对话框作为单独的组件实现

Can't implement Angular Material Popup Dialog as separate component in Angular 4

angular-material

angular-material2

angular