如何修复默认 material 对话框

Question

请帮助修复 angular 2 material 对话框组件。

我尝试以最简单的形式启动对话框组件。 Here's 我得到了什么。问题是，单击按钮后，对话框打开时相对于屏幕边缘有很大的偏移量。此外，控制台显示以下错误消息：

Error: No component factory found for ConvDialogComponent. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (core.es5.js:3202)

app.module.ts:

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdDialogModule } from '@angular/material';

import { AppComponent } from './app.component';
import { ConvDialogComponent } from './conv-dialog/conv-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    ConvDialogComponent
  ],
  imports: [
    MdDialogModule,
    BrowserAnimationsModule,
    MdButtonModule,
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';

import { MdDialog } from '@angular/material';

import { ConvDialogComponent } from './conv-dialog/conv-dialog.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  selectedOption: string;

  constructor(public dialog: MdDialog) {};

    private openMoneyConverter(): void {
        console.log(111);
        this.dialog.open(ConvDialogComponent);
    };

}

conv-dialog.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-conv-dialog',
  templateUrl: './conv-dialog.component.html',
  styleUrls: ['./conv-dialog.component.css']
})
export class ConvDialogComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

将ConvDialogComponent添加到@NgModule.entryComponents

@NgModule({
  declarations: [
    AppComponent,
    ConvDialogComponent
  ],
  imports: [
    MdDialogModule,
    BrowserAnimationsModule,
    MdButtonModule,
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ConvDialogComponent]
})

如何修复默认 material 对话框

How fix defaut material dialog

javascript

angular-material2

angular