我试图在https://material.angular.io/components/component/dialog上跟踪文档,但我不明白为什么它有以下问题?

我在组件上添加了以下内容:

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

在我的模块中我添加了

import { HomeComponent,DialogResultExampleDialog } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog
  ],

// ...

但是我得到了这个错误....

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:50
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345
    error_handler.js:52 ORIGINAL EXCEPTION: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:52
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345

当前回答

我有同样的问题,我在EntryComponents中有dialogComponent,它仍然不工作。这就是我解决问题的方法。这里是以前回答过的帖子的链接:

https://stackoverflow.com/a/64224799/14385758

其他回答

如果你试图在服务中使用MatDialog -让我们称其为“PopupService”,该服务定义在一个模块中:

@Injectable({ providedIn: 'root' })

那么它可能不会起作用。我正在使用惰性加载,但不确定这是否相关。

你必须:

使用[提供:PopupService]直接向打开对话框的组件提供PopupService。这允许它在组件中使用(DI) MatDialog实例。我认为在这个实例中调用open的组件需要与dialog组件在同一个模块中。 将对话框组件移到app.module中(就像其他答案所说的那样) 在调用服务时传递matDialog的引用。

请原谅我的混乱的答案,重点是它的providedIn: 'root'是打破东西,因为MatDialog需要从一个组件。

在我的例子中,我将我的组件添加到declarations和entryComponents中,得到了相同的错误。我还需要将MatDialogModule添加到导入。

If you are like me, and are staring at this thread thinking "But I'm not trying to add a component, I am trying to add a guard/service/pipe, etc." then the issue is likely that you have added the wrong type to a routing path. That is what I did. I accidentally added a guard to the component: section of a path instead of the canActivate: section. I love IDE autocomplete but you have to slow down a bit and pay attention. If you absolutely can't find it, do a global search for the name it is complaining about and look at every usage to make sure you didn't slip-up with a name.

虽然整合素材对话是可能的,但我发现这样一个简单功能的复杂性相当高。如果您试图实现非平凡的特性,那么代码将变得更加复杂。

出于这个原因,我最终使用了PrimeNG Dialog,我发现它使用起来非常简单:

m-dialog.component.html:

<p-dialog header="Title">
  Content
</p-dialog>

m-dialog.component.ts:

@Component({
  selector: 'm-dialog',
  templateUrl: 'm-dialog.component.html',
  styleUrls: ['./m-dialog.component.css']
})
export class MDialogComponent {
  // dialog logic here
}

m-dialog.module.ts:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DialogModule } from "primeng/primeng";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    DialogModule
  ], 
  exports: [
    MDialogComponent,
  ], 
  declarations: [
    MDialogComponent
  ]
})
export class MDialogModule {}

简单地将对话框添加到组件的html中:

<m-dialog [isVisible]="true"> </m-dialog>

PrimeNG PrimeFaces文档易于遵循并且非常精确。

您必须将它添加到entryComponents中,正如文档中指定的那样。

@NgModule({
  imports: [
    // ...
  ],
  entryComponents: [
    DialogInvokingComponent, 
    DialogResultExampleDialog
  ],
  declarations: [
    DialogInvokingComponent,   
    DialogResultExampleDialog
  ],
  // ...
})

下面是一个完整的应用模块文件示例,其中的对话框定义为entryComponents。