如何解决Angular提及自动补全时textarea输入卡顿问题？

先修复代码冲突 #

你同时用了formControlName和[(ngModel)]，这在Angular里会触发重复的变更检测，是卡顿的核心诱因之一。必须二选一，推荐保留响应式表单的formControlName，移除[(ngModel)]，通过FormControl实例来管理输入值。

优化@flxng/mentions性能 #

• 给补全功能加防抖设置，比如配置debounceTime: 300，避免每输入一个字符就立刻触发补全查询
• 限制补全列表显示数量，比如limit: 10，减少DOM渲染的元素量
• 仅在输入特定触发字符（比如@）时激活补全，不要全局监听所有输入动作

精简事件处理逻辑 #

• (focus)事件里如果包含大量数据加载或DOM操作，改成异步执行，或者只在首次获取焦点时执行一次
• valSelected($event)里避免同步执行耗时操作，比如复杂字符串拼接、数据转换，可拆分到异步任务中处理

移除冗余绑定 #

删掉[value]="textInput"，因为formControlName或[(ngModel)]已经会自动同步值，重复绑定会增加额外的渲染开销

修改后的示例代码 #

<textarea 
  formControlName="textControl" 
  cdkTextareaAutosize 
  #autosize="cdkTextareaAutosize"
  rows="1" 
  style="margin-left: 10px;font-size: 14px;color:#424242; padding-top: 14px;resize: none;overflow:hidden" 
  matInput 
  type="search" 
  id="textTextArea" 
  #commonSearchString 
  placeholder="Start" 
  (focus)="onfocus()" 
  (itemSelected)="valSelected($event)"
></textarea>

额外优化：组件变更检测策略 #

把组件的变更检测改成OnPush，减少不必要的检测次数：

@Component({
  // ...其他配置项
  changeDetection: ChangeDetectionStrategy.OnPush
})

内容的提问来源于stack exchange，提问作者sreeja