Angular中复用带下拉列表的公共组件 如何实现两处选择值独立

两个下拉实例选择值同步的核心原因如下：

• 公共下拉组件没有为每个实例维护独立的选中状态，<select>元素没有绑定专属的值存储变量
• 事件绑定逻辑不规范，把点击事件绑定在option上容易出现状态读取异常，部分场景下会误拿到其他实例的选中值

1. 调整公共下拉组件TS代码 #

为每个组件实例新增独立的选中值存储变量，保证多个实例之间状态隔离：

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

@Component({
  selector: 'dropdown-component',
  templateUrl: './dropdown.component.html'
})
export class DropdownComponent {
  @Input() dropDownList: string[] = [];
  // 每个实例独立的选中值变量，互不影响
  private selectedValue: string = '';
  @Output() select: EventEmitter<string> = new EventEmitter<string>();

  onValueChange() {
    this.select.emit(this.selectedValue);
  }
}

2. 调整公共下拉组件模板代码 #

把事件绑定移到<select>元素的change事件上，同时用ngModel绑定内部独立的选中值变量：

<select [(ngModel)]="selectedValue" (change)="onValueChange()">
  <option *ngFor="let label of dropDownList" [value]="label"> {{ label }} </option>
</select>

注意：使用[(ngModel)]双向绑定需要先在组件所属的模块中导入FormsModule，示例：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其余模块导入
    FormsModule
  ]
})
export class YourModule {}

3. 父组件调整存储逻辑 #

父组件需要用两个独立的变量分别存储两个下拉的选中值，不要共用同一个变量：

// 父组件TS代码
export class ParentComponent {
  dropdownValues = ['选项1', '选项2', '选项3'];
  // 分别存储两个下拉的选中值
  firstDropdownVal: string = '';
  secondDropdownVal: string = '';

  action(val: string) {
    this.firstDropdownVal = val;
    // 此处写第一个下拉的后续业务逻辑
  }

  action1(val: string) {
    this.secondDropdownVal = val;
    // 此处写第二个下拉的后续业务逻辑
  }
}

父组件的模板代码无需修改，保持原有写法即可正常使用，两个下拉的选中值会完全独立。

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