那些遇到过的问题

使用 SVG 时，Angular ControlValueAccessor 复选框始终为 true

vai*_*dil 5 svg angular angular-forms

我有一个自定义复选框组件，它当前使用一些 Material Icons 图标来显示。我在几个地方使用了这个组件，但是我遇到了一个特定实例的问题。

我在左侧有一个带有复选框的网格，可以一次选择多行。当<i>用于从字体显示图标时，这些复选框可以正常工作。当我改用 SVG 时，这些复选框会中断。我一次只能选择一个，我不能取消选择一个已选择的。如果我选中一个框，它会像您期望的那样检查。如果我再次单击它，则什么也没有发生——该框保持选中状态。如果我选中一个不同的框，第一个是未选中的。

这是原始的复选框组件模板：

<label class="my-checkbox" [class.pointer]="!disabled">
  <input
      type="checkbox"
      class="form-control norowclick"
      [class.indeterminateinput]="indeterminate"
      [checked]="checked"
      [(ngModel)]="value"
      (blur)="onBlur()"
      [disabled]="disabled"
  >
  <i class="material-icons md-18 indeterminate norowclick">indeterminate_check_box</i>
  <i class="material-icons md-18 checked norowclick">check_box</i>
  <i class="material-icons md-18 unchecked norowclick">check_box_outline_blank</i>
</label>
Run Code Online (Sandbox Code Playgroud)

这是新模板，使用angular-svg-icon. 在呈现时，有一个<svg-icon>与元素<svg>元素作为其唯一的孩子。这是对任何代码所做的唯一更改，这就是导致它中断的原因。

<label class="my-checkbox" [class.pointer]="!disabled">
  <input
      type="checkbox"
      class="form-control norowclick"
      [class.indeterminateinput]="indeterminate"
      [checked]="checked"
      [(ngModel)]="value"
      (blur)="onBlur()"
      [disabled]="disabled"
  >
  <svg-icon name="indeterminate_check_box" class="icon-18 indeterminate norowclick"></svg-icon>
  <svg-icon name="check_box" class="icon-18 checked norowclick"></svg-icon>
  <svg-icon name="check_box_outline_blank" class="icon-18 unchecked norowclick"></svg-icon>
</label>
Run Code Online (Sandbox Code Playgroud)

这是复选框组件代码：

@Component({
  selector: 'my-checkbox',
  templateUrl: './my-checkbox.component.html',
  styleUrls: ['./my-checkbox.component.less'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCheckboxComponent),
      multi: true
    }
  ]
})
export class MyCheckboxComponent implements OnInit, ControlValueAccessor {
  @Input() formControlName: string;
  @Input() checked: boolean = false;
  @Input() indeterminate: boolean = false;
  @Input() disabled: boolean = false;
  public control: AbstractControl;

  private innerValue: any = '';
  private controlContainer: ControlContainer;

  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;

  constructor(
    @Optional()
    @Host()
    @SkipSelf()
    private _controlContainer: ControlContainer
  ) {
    this.controlContainer = _controlContainer;
  }

  ngOnInit() {
    this._getFormControl();
  }

  private _getFormControl() {
    if (this.controlContainer) {
      if (this.formControlName) {
        this.control = this.controlContainer.control.get(this.formControlName);
      }
    }
  }

  get value(): any {
    return this.innerValue;
  }

  set value(v: any) {
    if (v !== this.innerValue) {
      this.indeterminate = false;
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }

  onBlur() {
    this.onTouchedCallback();
  }

  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }

  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }
}
Run Code Online (Sandbox Code Playgroud)

网格列呈现为这样的模板。当传递给checkSecret()函数时，$event.target.checked在新版本中始终为 true。

@Component({
  selector: 'my-checkbox',
  templateUrl: './my-checkbox.component.html',
  styleUrls: ['./my-checkbox.component.less'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCheckboxComponent),
      multi: true
    }
  ]
})
export class MyCheckboxComponent implements OnInit, ControlValueAccessor {
  @Input() formControlName: string;
  @Input() checked: boolean = false;
  @Input() indeterminate: boolean = false;
  @Input() disabled: boolean = false;
  public control: AbstractControl;

  private innerValue: any = '';
  private controlContainer: ControlContainer;

  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;

  constructor(
    @Optional()
    @Host()
    @SkipSelf()
    private _controlContainer: ControlContainer
  ) {
    this.controlContainer = _controlContainer;
  }

  ngOnInit() {
    this._getFormControl();
  }

  private _getFormControl() {
    if (this.controlContainer) {
      if (this.formControlName) {
        this.control = this.controlContainer.control.get(this.formControlName);
      }
    }
  }

  get value(): any {
    return this.innerValue;
  }

  set value(v: any) {
    if (v !== this.innerValue) {
      this.indeterminate = false;
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }

  onBlur() {
    this.onTouchedCallback();
  }

  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }

  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }
}
Run Code Online (Sandbox Code Playgroud)

Jul*_*ien 6

我不确定，但我怀疑输入状态和事件管理有些奇怪。这是我绝对没有测试过的快速修复尝试。

<label class="my-checkbox" [class.pointer]="!disabled">
  <input
      type="checkbox"
      class="form-control norowclick"
      [class.indeterminateinput]="indeterminate"
      [checked]="checked"
      (change)="onInputChange($event)" <-- CHANGE HERE ->
      (blur)="onBlur()"
      [disabled]="disabled"
  >
  <i class="material-icons md-18 indeterminate norowclick">indeterminate_check_box</i>
  <i class="material-icons md-18 checked norowclick">check_box</i>
  <i class="material-icons md-18 unchecked norowclick">check_box_outline_blank</i>
</label>

@Component({
  selector: 'my-checkbox',
  templateUrl: './my-checkbox.component.html',
  styleUrls: ['./my-checkbox.component.less'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCheckboxComponent),
      multi: true
    }
  ]
})
export class MyCheckboxComponent implements OnInit, ControlValueAccessor {
  @Input() formControlName: string;
  @Input() checked: boolean = false;
  @Input() indeterminate: boolean = false;
  @Input() disabled: boolean = false;
  public control: AbstractControl;

  private innerValue: any = '';
  private controlContainer: ControlContainer;

  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;

  constructor(
    @Optional()
    @Host()
    @SkipSelf()
    private _controlContainer: ControlContainer
  ) {
    this.controlContainer = _controlContainer;
  }

  ngOnInit() {
    this._getFormControl();
  }

  private _getFormControl() {
    if (this.controlContainer) {
      if (this.formControlName) {
        this.control = this.controlContainer.control.get(this.formControlName);
      }
    }
  }

 // CHANGE HERE 
 onInputChange(event) {
    const newValue: boolean = event.target.checked;
    if (newValue !== this.innerValue) {
      this.indeterminate = false;
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }

  onBlur() {
    this.onTouchedCallback();
  }

  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }

  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }
}
Run Code Online (Sandbox Code Playgroud)

除此之外，我想告诉您（根据我的理解）您应该在调用自定义控件值访问器时使用 [(ngModel)]。喜欢 ：

<my-checkbox class="norowclick" [(ngModel)]="item['isSelected']"></my-checkbox>
Run Code Online (Sandbox Code Playgroud)

或者，如果您确实想捕获 ngModel 更改以执行除更新值之外的其他操作：

<my-checkbox class="norowclick" [ngModel]="item['isSelected']" (ngModelChange)="checkSecret(item, $event)"></my-checkbox>
Run Code Online (Sandbox Code Playgroud)

然后，重写的 writeValue 可用于更新您的内部模型 (innerValue)，捕获来自父组件的更改事件。

要将模型更改从 ControlValueAccessor 发送回父组件，您可以使用在 registerOnChange 中注册的回调，我认为您做得对。

我也觉得变量checked和innerValue可能有点多余。

归档时间：

查看次数：

2392 次

最近记录：

6 年，6 月 前
相关归档
Angular2 - 从外部验证并提交表单 41
Typescript Angular - Observable:如何改变它的价值？ 31
http post请求中的Angular2超时 17
Firebase Firestore get()无效 9
鼠标悬停在SVG圈子上 8
如何在构造函数Angular 2上使用Async调用注入服务 7
ionic 2 ion-datetime ISO格式问题 7
延迟加载和嵌套路由器出口 7
如何从复杂的svg正确生成画布 6
在Snap.svg中操作路径或重绘它？ 5
难疑归档
RESTful编程究竟是什么？ 3917
C++中指针变量和引用变量之间有什么区别？ 3115
如何检查对象是否是数组？ 2581
PHP'foreach'如何实际工作？ 1926
带请求正文的HTTP GET 1896
Python中的静态方法？ 1639
如何在Git中有选择地合并或选择来自另一个分支的更改？ 1374
对JavaScript对象数组进行排序 1233
为什么使用'=='或'is'比较字符串有时会产生不同的结果？ 1076
AngularJS中指令范围内的'@'和'='有什么区别？ 1053