Angular如何实现select下拉组件基于选中值的联动展示

要实现两个同类型select组件实例的联动，同时保证第二个下拉框常驻页面，核心逻辑是将组件内部的固定选项改为通过@Input动态传入，同时新增选中值变化的输出事件，由父组件做状态中转联动即可。

1. 改造通用select组件 #

select.component.ts #

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

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html'
})
export class SelectComponent {
  // 动态传入的选项列表
  @Input() options: string[] = [];
  // 动态传入的默认占位提示
  @Input() placeholder: string = '请选择';
  // 选中值变化时向外抛出事件
  @Output() selectedChange = new EventEmitter<string>();

  currentSelected: string = '';

  onValueChange(): void {
    this.selectedChange.emit(this.currentSelected);
  }
}

select.component.html #

删除原有的硬编码选项和*ngIf显示控制，改为动态绑定传入的参数：

<select class="form-select border-blue" [(ngModel)]="currentSelected" (change)="onValueChange()">
  <option value="" selected>{{ placeholder }}</option>
  <option *ngFor="let item of options" [value]="item">{{ item }}</option>
</select>

2. 父组件内实现联动 #

父组件模板（示例为app.component.html） #

直接放置两个select组件实例，不需要用*ngIf控制第二个实例的显示，保证常驻：

<!-- 第一个实例：城市选择 -->
<app-select 
  [options]="cities" 
  placeholder="Select City"
  (selectedChange)="handleCitySelect($event)"
></app-select>

<!-- 第二个实例：区县选择，常驻页面 -->
<app-select 
  [options]="districts" 
  placeholder="Select district"
></app-select>

父组件逻辑（示例为app.component.ts） #

监听第一个下拉的选中事件，动态更新第二个下拉的选项列表：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 城市列表，直接传给第一个下拉组件
  cities: string[] = ['北京', '上海', '广州'];
  // 区县列表，初始为空，选中城市后动态更新
  districts: string[] = [];

  // 模拟城市-区县映射关系，实际场景可替换为后端接口请求
  private cityDistrictMap: Record<string, string[]> = {
    '北京': ['东城区', '西城区', '朝阳区', '海淀区'],
    '上海': ['黄浦区', '徐汇区', '长宁区', '静安区'],
    '广州': ['荔湾区', '越秀区', '海珠区', '天河区']
  }

  handleCitySelect(selectedCity: string): void {
    // 选中城市后更新区县列表，自动同步到第二个下拉组件
    this.districts = this.cityDistrictMap[selectedCity] || [];
  }
}

注意事项 #

• 使用前请确保对应Angular模块已经导入FormsModule，否则ngModel双向绑定会失效
• 如果选项为对象类型而非字符串，可修改@Input() options的类型，同时调整模板中[value]的绑定逻辑即可

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