-1

我正在尝试设置一个stackblitz 示例，以针对我在测试中遇到的问题提出一个更复杂的问题。

但是，在设置基本示例时，当我的基本测试通过时，单击按钮以显示 MatDialog 会引发找不到 ComponentFactory 的错误。但我已将其添加到 app.module.ts 中的声明和 entryComponent 中。我错过了什么。？

ps 代码本身在我更大的项目中有效，这与我在 Stackblitz 中设置它的方式有关，这似乎是问题所在。

pps基于下面Maihan的回答，它让我思考了这个想法本身。即使它构建并运行，这个想法也会抱怨无法找到 AddUserDialog 组件。但不确定为什么。

在此处输入图像描述

app.component.ts

import { Component } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material';
import { AddUserDialogComponent } from './AddUserDialogComponent';

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

constructor(public dialog: MatDialog){
};

openAddUserDialog(): void{
   const dialogConfig = new MatDialogConfig();

   dialogConfig.data = {
        employeeList:['foo', 'bar'],
        roles: ['fiz', 'faz']
    };

   const dialogRef = this.dialog.open(AddUserDialogComponent, dialogConfig);

   dialogRef.afterClosed().subscribe((data) => {
   console.log('hello');
   });
 }
}

app.module.ts

import { NgModule } from '@angular/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MatDialogModule, MatDialogRef, MatDialog } from '@angular/material/dialog';
import { AddUserDialogComponent } from './AddUserDialogComponent';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, MatDialogModule, NoopAnimationsModule ],
  declarations: [ AppComponent, AddUserDialogComponent ],
  exports: [AppComponent, AddUserDialogComponent],
  entryComponents: [ AddUserDialogComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
4

1 回答 1

2

在app.component.ts导入中@angular/material/dialog：

import { MatDialog, MatDialogConfig } from '@angular/material/dialog';

代替：

import { MatDialog, MatDialogConfig } from '@angular/material';

并将其注入root。如果您在服务中使用它或用于延迟加载的模块，通常会发生这种情况。

@Injectable({ providedIn: 'root' })
export class AddUserDialogComponent implements OnInit {}

您正在AddUserDialogComponent动态加载，因此，您添加了app.module.ts > entryComponents. 您需要在测试单元中执行相同的操作：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [RouterTestingModule, MatDialogModule, NoopAnimationsModule],
    providers: [AddUserDialogComponent],
    declarations: [AppComponent, AddUserDialogComponent]
  })
    .overrideModule(BrowserDynamicTestingModule, {
      set: { entryComponents: [AddUserDialogComponent] }
    })
    .compileComponents();
}));

另外，添加<my-app></my-app>到您index.html以消除控制台中的以下错误：

选择器“my-app”不匹配任何元素

于 2019-12-11T17:44:42.240 回答