Angular4/5中Karma/Jasmine测试自定义输入组件：ng-reflect与原生属性差异

我来帮你理清这个问题，你遇到的情况是Angular单元测试里的常见细节问题，既不是遗漏了生命周期事件，也完全不需要切换到Protractor测试～

核心问题分析 #

你看到ng-reflect-is-disabled生效但原生disabled属性没反应，主要有三个关键原因：

1. 选择器匹配错误：你的组件里input的class是input-class，但测试代码里用了By.css('input-element')，这根本匹配不到目标元素，自然拿不到正确的原生属性。
2. 未获取原生DOM元素：fixture.debugElement是Angular封装的调试元素，不是原生DOM节点，你需要通过它的nativeElement属性才能访问原生的disabled属性和方法。
3. 变更检测顺序错误：你先获取了元素，再调用fixture.detectChanges()，这时候Angular还没把表单控件的禁用状态同步到视图上。

修正后的测试代码 #

调整测试步骤顺序，修正元素选择器和获取方式：

it('can be disabled', () => {
  // 1. 先禁用表单控件
  formControl.disable();
  // 2. 触发变更检测，让Angular更新组件视图
  fixture.detectChanges();
  // 3. 正确匹配input元素并获取原生DOM节点
  const inputElement = fixture.debugElement.query(By.css('.input-class')).nativeElement;
  // 4. 断言原生disabled属性
  expect(inputElement.disabled).toBeTruthy();
  // 也可以断言disabled属性存在于元素上
  expect(inputElement.hasAttribute('disabled')).toBeTruthy();
});

额外排查点 #

如果调整后还是不生效，需要检查自定义组件是否正确实现了ControlValueAccessor接口。因为当你用Reactive Form的formControl绑定自定义组件时，组件必须实现这个接口才能和表单控件的状态（禁用/启用、值变更等）同步。你的组件里用了[(ngModel)]="value"，但如果和formControl配合使用，要确保disabled输入属性能正确响应formControl的状态变化。

另外，ng-reflect-*只是Angular的调试辅助属性，用来直观显示绑定的值，实际测试中我们应该优先断言原生DOM属性或行为，而不是依赖这些调试属性。

内容的提问来源于stack exchange，提问作者cpater