1

Angular2とReduxを使用して新しいプロジェクトを開始しています。

不変オブジェクトとして、状態が変更されると、新しいオブジェクトが作成され、Angular はすべての DOM を再描画します。アクションが入力要素によってディスパッチされた場合、フォーカスは失われます。
動作を再現するためにサンプル plunk をフォークしました: http://plnkr.co/yb53ij

実際のアプリでは、フォーム API の「.debounceTime()」を使用しましたが、これはユーザー エクスペリエンスに適していないようです。これを回避する方法はありますか、それとも何か不足していますか?

レデューサーコード:

export const todos = (state = [{text: 'Edit my input...'}], {type, payload}) => {
  switch(type){
    case ADD_TODO: ...
    case UPDATE_TODO: ...
    case COMPLETE_TODO: ...
    case DELETE_TODO: ...
    case 'REPEAT_TODO':
      // Creates new state:
      return state.map(todo => {
        return todo.id !== payload.todo.id ?
          todo :
          Object.assign({}, todo, {times: payload.times})
      });
    default:
      return state;
  }

ありがとうございました！

4

1 に答える 1

1

これを解決するには、ディレクティブのtrackBy関数を使用する必要があります*ngFor。したがって、DOM を再度レンダリングしないように Angular に指示できます。これは、私のような知識のない開発者にとってパフォーマンス トラップになる可能性があります。=P

@Component({
  selector: 'todo-list',
  template: `
    <div>
      <todo-list-item 
        *ngFor="#todo of todos; trackBy:custom"
        ...
      ></todo-list-item>
    </div>
  `,
  directives: [TodoListItem]
})
export class TodoList {
  ...

  custom(index,item){
    return index;
  }
}

これが実際のプランカーのデモです: http://plnkr.co/1ffRPD6F1vHw0EmHh5er

于 2016-07-28T17:18:55.750 に答える