发出事件Angular 5时失去输入焦点？答案

【问题标题】：Lose input focus when emitting an event Angular 5?发出事件Angular 5时失去输入焦点？
【发布时间】：2018-04-05 16:46:47
【问题描述】：

我正在使用 Angular 5 + ngrx/store。我有自己的 tokenfield 组件。这应该与bootstrap-tokenfield 完全一样。它看起来像这样stackblitz。在 stackblitz 中，它按预期工作，但在我的应用程序中，由于某些原因，我在添加每个令牌后都会失去焦点。似乎pressEnter 事件触发器失去焦点。 pressEnter 在容器中触发一个动作：

addToken(token: Token) { this.store.dispatch(new Actions.addToken(token)); }

然后我传递给组件抛出容器令牌：

[tokens]="tokens$ | async"

这里是reducer中处理这个动作的函数：

export function addTokenCase(payload: Token, state: State) {
  return state.map((tokenModel) => {
    if (tokenModel.from === payload.from) {
      return {
        ...tokenModel,
        items: uniqueArray<string>([...tokenModel.items, ...payload.tokens]),
      };
    }
    return tokenModel;
  });
}

uniqueArray 在哪里：

export function uniqueArray<T>(array: T[]): T[] {
  return array.filter((elem, pos, arr) => arr.indexOf(elem) === pos);
}

可能是什么问题？谢谢你。

【问题讨论】：

我认为我们需要查看更多您的原始代码——似乎某些东西可能正在重新呈现输入字段
我更新了答案

标签： javascript html angular focus angular5

【解决方案1】：

我找到了问题的根源。我在tokenfield 上面有*ngFor 组件：

<div *ngFor="let token of tokens">
  <ui-token [token]="token"></ui-token>
</div>

所以当我用.map() 更改状态时 - 所有<ui-token /> 组件都被重新渲染。我添加了trackBy，它现在可以按预期工作而无需重新渲染：

<div *ngFor="let token of tokens; trackBy: trackToken">
  <ui-token [token]="token"></ui-token>
</div>

trackToken 在哪里：

trackToken(index: number) {
  return index;
}

【讨论】：