Question

我在以下相同的ts文件中创建了两个组件。从https://material.angular.io/components/dialog/examples引用示例代码，它使用相同的方法。

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogModule, MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';


@Component({
  selector: 'app-srapi',
  templateUrl: './srapi.component.html',
  styleUrls: ['./srapi.component.scss']
})
export class SrapiComponent {

  constructor(private dialog: MatDialog) { }

  onCreate(): void {
    const dialogRef = this.dialog.open(SrapiTFLFormComponent);
  }
}

@Component({
  selector: 'app-srapi-tfl-form',
  templateUrl: './srapi-tfl-form.html'
})
export class SrapiTFLFormComponent{

  constructor(public dialogRef: MatDialogRef<SrapiTFLFormComponent>) {}
}

也在app.module.ts

中声明并导入了这两者

import { SrapiComponent, SrapiTFLFormComponent } from './srapi/srapi.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    RegisterComponent,
    EdcUserFormComponent,
    SidebarComponent,
    EdcMasterDataComponent,
    SrapiComponent,
    SrapiTFLFormComponent
  ],
  imports: [
    BrowserModule,
.
.

，但是在打开对话框时出现错误。

错误错误：找不到SrapiTFLFormComponent的组件工厂。您是否将其添加到@ NgModule.entryComponents？在noComponentFactoryError（core.js：15705）

Answer 1

在app.module.ts中，在EntryComponent数组中添加SrapiTFLFormComponent：

使用此组件作为对话框打开时，必须将其添加到EntryComponents数组中：

输入组件是按类型Angular强制性加载的任何组件（这意味着您没有在模板中引用它）。通过将入口组件引导到NgModule中或将其包含在路由定义中来指定入口组件

赞：

entryComponents: [ SrapiTFLFormComponent ]

Answer 2

在您的app.module.ts中添加以下代码：

import { SrapiComponent, SrapiTFLFormComponent } from './srapi/srapi.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    RegisterComponent,
    EdcUserFormComponent,
    SidebarComponent,
    EdcMasterDataComponent,
    SrapiComponent,
    SrapiTFLFormComponent
  ],
  imports: [
    BrowserModule,
.
. 
],
entryComponents: [
   SrapiTFLFormComponent
]

Answer 3

错误提示，您还需要在entryComponents内部添加组件。

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    RegisterComponent,
    EdcUserFormComponent,
    SidebarComponent,
    EdcMasterDataComponent,
    SrapiComponent,
    SrapiTFLFormComponent
  ],
  imports: [
    BrowserModule,
    ...
  ],
 entryComponents: [SrapiTFLFormComponent]
 ...

要弄清楚什么是entryComponents，可以看一下here

入口组件是Angular强制性加载的任何组件，（这意味着您没有在模板中引用它），按类型。您通过在NgModule中引导来指定入口组件，或者将其包含在路由定义中。

Answer 4

我遇到问题“错误：未找到Search Food Components的组件工厂。是否已将其添加到@ NgModule.entryComponents？”如下图所示

简单的方法：您需要将SearchFoodModalComponent添加到@NgModule中的条目组件中

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

import { SearchFoodModalComponent } from "../../modals//searchFood/searchFood.component";
import { InboundComponent } from './inbound/inbound.component'




@NgModule({
    declarations: [InboundComponent,SearchFoodModalComponent],
    imports: [

    ],
    exports: [
        RouterModule
    ],
    providers: [InboundService],
    entryComponents: [SearchFoodModalComponent]
})
export class InBoundFormModule {
}

角度8：错误错误：未找到组件工厂

4 个答案: