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

Question

我正在使用 angular 5 + ngrx/store。我有自己的 tokenfield 组件。这应该与 bootstrap-tokenfield. It look something like this 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);
}

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

Answer 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;
}

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

Lose input focus when emitting an event Angular 5?

html

javascript

focus

angular

angular5