单元测试没有ChangeDetectorRef的提供者-Java 学习之路

版本：Angular 4 .

我正在将子组件注入子组件以通过子组件访问父方法 .

在父组件中，我不得不使用ChangeDetectorRef，因为它有一个将更新运行时的属性 .

现在代码工作正常，但是子组件规范为“ChangeDetectorRef”抛出了错误，该错误是在父组件中注入的 .

错误：没有ChangeDetectorRef的提供者！

父组件

import { Component, AfterViewChecked, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ParentComponent implements AfterViewChecked {

  stageWidth: number;

  constructor(private ref: ChangeDetectorRef) {
    this.ref = ref;
  }

  //call this function as many times as number of child components within parent-component.
  parentMethod(childInterface: ChildInterface) {
    this.childInterfaces.push(childInterface);
  }

  ngAfterViewChecked() {
    this.elementWidth = this.updateElementWidthRuntime();
    this.ref.detectChanges();
  }
}

子组件

import { Component, AfterViewInit } from '@angular/core';
import { ParentComponent } from '../carousel.component';

@Component({
  selector: 'child-component',
  templateUrl: './carousel-slide.component.html',
  styleUrls: ['./carousel-slide.component.scss'],
})
export class ChildComponent implements AfterViewInit {

  constructor(private parentComponent: ParentComponent) {
  }

  ngAfterViewInit() {
    this.parentComponent.parentMethod(this);
  }
}

app.html

<parent-component>
    <child-component>
      <div class="box">Content of any height and width</div>
    </child-component>
    <child-component>
      <div class="box">Content of any height and width</div>
    </child-component>
    <child-component>
      <div class="box">Content of any height and width</div>
    </child-component>
</parent-component>

Unit test for Child Component

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ParentComponent } from '../parent.component';
import { ChildComponent } from './child.component';

describe('ChildComponent', () => {
  let component: ChildComponent;
  let fixture: ComponentFixture<ChildComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ChildComponent],
      providers: [ParentComponent]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ChildComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create \'ChildComponent\'', () => {
    expect(component).toBeTruthy();
  });
});

当我试图在子规范中的提供程序中添加ChangeDetectorRef时，我收到以下错误 .

失败：遇到未定义的提供商！通常这意味着您有一个循环依赖（可能是由使用'桶'index.ts文件引起的 . ）

谷歌搜索和尝试很多事情后，我无法找到解决方案 . 任何帮助赞赏 .

2 回答

2
您正在使用组件作为提供程序，这可能不是您的意图 . 更改测试模块以声明父组件和子组件 .
```
TestBed.configureTestingModule({
  declarations: [ChildComponent, ParentComponent],
  providers: []  
})
```
回复于 2024-04-20T11:22:58+08:00
0
我可以通过在我的父组件中使"ChangeDetectorRef"作为 @Optional 依赖来摆脱这个错误 .
```
constructor(@Optional() private ref: ChangeDetectorRef) {
    this.ref = ref;
}
```
这样我的子组件的configureTestingModule将忽略ParentComponent提供者 .
回复于 2024-04-20T11:22:58+08:00

单元测试没有ChangeDetectorRef的提供者

2 回答

相关问题