尽管每次都运行，但每两次只会切片一次

Question

我正在编写一个只允许某些数字格式的组件，除了一件事之外，它的工作效果非常好，它每次都会对值进行切片，但每两次只会更新一次。所以如果我按照这个顺序写它：

一个 乙 C d

我最终选择了BD。

我无法理解这里发生了什么。

这是组件：

@Component({
  selector: 'my-input',
  templateUrl: 'my-input.html',
  styleUrls: ['my-input.css'],
  inputs: [
    'model',
    'pattern'
  ],
  host: {
    '(input)': 'isNum($event.target.value)'
  },
  providers: [
    RegexService
  ]
})

export class FormNumberInputComponent {
  @Input() model: number;
  @Output('modelChange') onModelChange: EventEmitter<any> = new EventEmitter();

  constructor(private _regexes: RegexService) {}

  isNum(value) {

    this.isInvalid = !this._regexes.test(this.pattern || 'integer', value);

    if (!this.isInvalid) {
      this.onModelChange.emit(value);
    }
    else {

      value = value.slice(0, -1);

      // This also doesn't work, gives the same result
      value = value.substring(0, -1);

      this.onModelChange.emit(value);
    }
  }
}

简单的模板：

<input [(ngModel)]="model">

从父组件中使用它，如下所示：

<my-input [(model)]="myModel1"></my-input>

Answer 1

试试这个：

this.onModelChange.emit(new String(value));

这是相应的plunker https://plnkr.co/edit/2KqCGggSDOdXhjiJEw68?p=preview

我会为此编写代替组件验证自定义管道：https://plnkr.co/edit/xCvnJ9682lV0Z1sBcK68?p=preview

也许有趣的是http://blog.jhades.org/how-does-angular-2-change-detection-really-work/