无法在 Angular 4 中将 Angular Material Popup Dialog 实现为单独的组件

Question

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

到目前为止，我几乎完全遵循了这个 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 { }

带有调用对话框按钮的组件的 My Component 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>

对话框组件的My Component 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>) {}
}

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

这些是 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 文件中