Question

在我做出元素<input value={this.valFromStore} />时做出反应，输入被锁定，直到商店发生变化。在角度4中，当我进行输入时，我似乎无法获得匹配的行为。 <input [ngModel]="valFromStore" />当我键入输入时，它会更改输入的值。即使我将valFromStore设置为没有setter的getter。

我的输入是否有办法绑定到商店然后打开（ngModel）我可以简单地更新商店并让更改像我能做出反应一样级联出来？

更新：添加示例以帮助澄清。在反应中，我希望我的输入会丢弃所有其他键输入，因此testing的值会显示在输入中，如etn。在实践中，我希望_currentValue为@input，从商店读取，handleChange调用this.store.dispatch（newValAction）。

import { Component, OnInit, Input, SimpleChanges } from '@angular/core';

@Component({
  selector: 'field-type-text',
  templateUrl: './field-type-text.component.html',
  styleUrls: ['./field-type-text.component.css']
})
export class FieldTypeTextComponent implements OnInit {
  _currentValue: any;

  constructor() { }

  private counter = 0;
  handleChange(e) {
    if (this.counter++ % 2) this._currentValue += e[e.length - 1]
  }

  ngOnInit() {

  }

}

HTML

<input type="text" [ngModel]="_currentVal" (ngModelChange)="handleChange($event)" />

Answer 1

我相信您正在寻找的是分开使用ngModel进行输入和事件发布：

<input [ngModel]="valFromStore" (ngModelChange)="callStoreChange($event)">

在这种情况下，'valFromStore'是一个局部变量valFromStore，它已经设置为在外部存储更改时更新，callStoreChanges($event)是一个更改存储的本地方法。

如果valFromStore是@Input valueFromStore，您需要实施OnChanges和SimpleChanges。如果它是来自Observable的值，则可能已设置为在推送时更新。

附注：请记住，如果生产AOT版本，您将需要从本地组件内调用商店服务的更改，而不是模板。

如何使输入表现得像Angular中的React

1 个答案: