Question

尝试使用角度6中的特征模型进行对话。但是我收到此错误：

找不到DialogModule的组件工厂。你有没有把它添加到@ NgModule.entryComponents？

每个人都在说使用

entryComponents：[DialogComponent]

我已经在做了。还尝试在功能模块中使用它而没有成功。以下是我认为必要和简化的文件：

app.module.ts

import { DialogModule } from './components/dialog/dialog.module';
import { DialogComponent } from './components/dialog/dialog.component';
...

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [..., AppComponent],
  imports: [DialogModule],
  entryComponents: [DialogComponent],

  providers: [..., MatDialogModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

dialog.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DialogComponent } from './dialog.component';
...

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [..., DialogComponent],
  exports: [DialogComponent]
})
export class DialogModule {
  ...
}

一些-other.component.ts

import { DialogModule } from '../../components/dialog/dialog.module';
...

@Component({
    ...
})

export class LanguageButtonComponent implements OnInit {

  constructor(private languageService : LanguageService,
    private dialog: MatDialog,) {
  }

  // activated from button
  openDialog() {
    this.dialog.open(DialogModule);
  }
}

如何摆脱错误？

Answer 1

您必须将DialogComponent置于entryComponents DialogModule而不是AppModule：

将entryComponents放入正确的模块

```的JavaScript

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DialogComponent } from './dialog.component';
...

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [DialogComponent],
  exports: [DialogComponent],
  entryComponents: [DialogComponent],
})
export class DialogModule {
    ...
}

```

从entryComponents

AppModule

Answer 2

从提供商

中删除 MatDialogModule

providers: [...],

Answer 3

结果我无法正确阅读错误消息。修复是改变

this.dialog.open(DialogModule);

到

this.dialog.open(DialogComponent);

另一个提醒是，如果您无法通过搜索网络找到解决简单问题的方案，那么很可能是一个错字。

Answer 4

我使用的是this主题，模态对话框在屏幕的左侧打开，像这样完全不可见

并抛出错误

错误错误：找不到DialogOverviewExampleDialogComponent的组件工厂。您是否将其添加到@ NgModule.entryComponents？

但是在位于材料根内部的对话框组件中工作正常。

如果您检查了材料模块，您将看到我们需要

DemoMaterialModule

和入口点

entryComponents：[DialogOverviewExampleDialogComponent]

因为对话框组件需要此

因此，简单的解决方案是在您的组件模块为 page.module.ts 的情况下，在组件模块中使用此模块和入口点所以我只需要添加它们就可以了

//This is important
entryComponents: [DialogOverviewExampleDialogComponent]
,
declarations: [
MatIconComponent,
TimelineComponent,
InvoiceComponent,
PricingComponent,
HelperComponent,
SiteSearchComponent,

UserAdminComponent,
CreateUserComponent,
ManageUserComponent ,
//This is important   
DialogOverviewExampleDialogComponent

结果

除了使用预定义的对话框外，您还可以通过重命名组件内部的组件来创建自己的对话框，例如

 @Component({
selector: 'app-create-dialog-overview-example-dialog',
template: `<h1 mat-dialog-title class='data.class'>{{data.title}}</h1>
<div mat-dialog-content >
<p>{{data.message}}</p>

</div>
<div mat-dialog-actions>
<button mat-button tabindex="2" (click)="onNoClick()">Ok</button>

</div>`
})
export class YOURDIALOGCOMPONENTNAMEHERE {
constructor(
public dialogRef: MatDialogRef<YOURDIALOGCOMPONENTNAMEHERE>,
@Inject(MAT_DIALOG_DATA) public data: any
) {


 }

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

}

以及打开对话框时

openDialog(): void {
    const dialogRef = this.dialog.open(YOURDIALOGCOMPONENTNAMEHERE,{
      width: '250px',
      data: { message: this.statusMessage ,class:this.class,title:this.title}

    });

最后将其添加到您的根模块组件中并输入

entryComponents:[YOURDIALOGCOMPONENTNAMEHERE],
declarations:[YOURDIALOGCOMPONENTNAMEHERE

Answer 5

如果使用该组件的模块是延迟加载的模块，则需要在同一模块中导入 MatDialogModule ，否则您将获得即使将组件添加到entryComponents中，也可能会出现相同的错误，或者也许可以为物料组件创建共享模块，然后将共享模块导入所有其他必需的模块中。

Answer 6

就我而言，我忘记将其添加到路由模块中。

const routes: Routes = [ {path: '', component: MyDiaglogComponent},

角度对话框：找不到DialogModule的组件工厂。

6 个答案: