Question

我的父级组件：
html：

<div *ngIf="data.errorMsg.firstName !== 0">
      <child (notes)="saveNote($event)"  [errorType]="data.errorMsg.firstName" nameType="first name"></child>
</div>

parent.spec.ts：

describe("ParentComponent", () => {
      let component: ParentComponent;
      let fixture: ComponentFixture<ParentComponent>;

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

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

      it("should create", () => {
        expect(component).toBeTruthy();
      });
    });

child.html：

<div [ngSwitch] = "errorType"> 
  <div *ngSwitchCase = "1">
    SomeError
  </div>
<p #note hidden="true"
</div>

child.component.ts：

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

  @Input() errorType: number;
  @Input() nameType: string;
  @ViewChild("note") note: ElementRef;
  @Output() notes: EventEmitter<string> = new EventEmitter<string>();
  constructor() { }

  ngAfterViewInit(): void {
    this.notes.emit(this.note.nativeElement.innerText);
  }

}

现在，在测试父级组件时，出现以下错误：

TypeError：无法读取未定义的属性'nativeElement'

之所以会这样，是因为注释的呈现取决于errorType的值。测试ChildComponent时出现类似错误。但是我可以在beforeEach（）中将虚拟值初始化为errorType。

但是在这里，这是不可能的。如何通过父级初始化子级的errortype变量。要么有更好的方法来测试吗？

Answer 1

您应该使用OnChanges生命周期挂钩来检测从父级到子级输入的任何变化：您可以在子级组件中使用以下代码来获取最新输入元素的值：

ngOnChanges(changes: SimpleChanges) {

        let errorType: SimpleChange = changes.errorType.currentValue;
        console.log(errorType)

    }

角度测试：从父级访问子级组件的元素

1 个答案: