Angular中多输入框独立字符计数显示异常问题求助

你遇到的问题核心是动态计数组件的挂载目标没有和每个输入框一一绑定——当前代码里所有计数都渲染到了同一个容器，所以第二个输入框的内容变化时，计数会显示在第一个输入框的位置，无法对应到自身。

要解决这个问题，我们需要给每个输入框分配独立的计数容器，并在触发事件时，把动态组件挂载到对应输入框的专属容器里：

1. 修改模板，给每个输入框添加专属计数容器
   给每个输入框后面加一个独立的<div>容器，用来承载对应的计数组件：

<div class="input-wrapper">
  <input 
    type="text" 
    (input)="handleInput($event)" 
    (blur)="handleBlur($event)"
    maxlength="20"
  >
  <!-- 第一个输入框的计数容器 -->
  <div #countBox1></div>
</div>

<div class="input-wrapper">
  <input 
    type="text" 
    (input)="handleInput($event)" 
    (blur)="handleBlur($event)"
    maxlength="20"
  >
  <!-- 第二个输入框的计数容器 -->
  <div #countBox2></div>
</div>

2. 在组件类中获取容器引用，关联对应输入框
   通过ViewChild获取每个容器的ViewContainerRef，在事件触发时，根据输入框找到对应的容器，再挂载/销毁计数组件：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { CountComponent } from './count/count.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 获取两个计数容器的引用
  @ViewChild('countBox1', { read: ViewContainerRef }) countBox1!: ViewContainerRef;
  @ViewChild('countBox2', { read: ViewContainerRef }) countBox2!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  handleInput(event: Event) {
    const inputEl = event.target as HTMLInputElement;
    // 找到当前输入框对应的计数容器
    const container = inputEl.nextElementSibling as HTMLElement;
    const targetContainer = container === this.countBox1.element.nativeElement 
      ? this.countBox1 
      : this.countBox2;

    // 先清空容器里已有的组件
    targetContainer.clear();

    // 创建计数组件并挂载到目标容器
    const factory = this.resolver.resolveComponentFactory(CountComponent);
    const componentRef = targetContainer.createComponent(factory);
    // 传递计数数据
    componentRef.instance.countText = `${inputEl.value.length}/${inputEl.maxLength}`;
  }

  handleBlur(event: Event) {
    const inputEl = event.target as HTMLInputElement;
    const container = inputEl.nextElementSibling as HTMLElement;
    const targetContainer = container === this.countBox1.element.nativeElement 
      ? this.countBox1 
      : this.countBox2;

    // 清空容器，隐藏计数
    targetContainer.clear();
  }
}

3. 确保计数组件接收输入属性
   修改计数组件，添加输入属性来接收计数文本：

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

@Component({
  selector: 'app-count',
  template: '<span class="count-text">{{ countText }}</span>'
})
export class CountComponent {
  @Input() countText!: string;
}

• 每个输入框对应独立的渲染容器，彻底解决计数错位问题
• 通过输入框的兄弟元素定位到对应容器，逻辑更直接
• 在每次输入时先清空容器，避免重复创建组件

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