Angular中如何获取下拉列表的选中值

刚接触Angular的话确实容易在路由传参这块懵，我来一步步帮你搞定这个需求～

首先看你当前的下拉代码，这些<a>标签只是单纯的跳转/占位链接，没有逻辑来记录用户选中的选项值，所以我们得先给它们加上选中状态的捕获逻辑，再把值带过去跳转。

首先在你的组件类里定义一个变量用来存选中的选项，然后给每个<a>标签添加点击事件，把当前选项的文本（或者你自定义的标识值）赋值给这个变量：

组件类（.ts文件） #

import { Component } from '@angular/core';
import { Router } from '@angular/router'; // 后面跳转要用，先导入

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  selectedOption: string; // 用来存选中的选项值

  constructor(private router: Router) {} // 注入Router服务

  // 点击选项时触发的方法
  selectAndNavigate(option: string) {
    this.selectedOption = option; // 先记录选中值
    // 根据不同选项处理跳转逻辑，这里以Auto Start为例
    switch(option) {
      case 'Auto Start':
        this.router.navigate(['/schedulemanagement/autoStartStopVm'], { 
          queryParams: { selected: option } // 把选中值作为查询参数传递
        });
        break;
      case 'Auto Shutdown':
        // 这里写Auto Shutdown的跳转逻辑，比如跳转到对应的路由
        // this.router.navigate(['/your-shutdown-route'], { queryParams: { selected: option } });
        break;
      case 'Auto Scale':
        // 同理处理Auto Scale的跳转
        break;
    }
  }
}

模板文件（.html文件） #

把原来的<a>标签修改一下，去掉原有的routerLink和href，换成点击事件绑定：

<div class="dropdown-content">
  <a (click)="selectAndNavigate('Auto Start')">Auto Start</a>
  <a (click)="selectAndNavigate('Auto Shutdown')">Auto Shutdown</a>
  <a (click)="selectAndNavigate('Auto Scale')">Auto Scale</a>
</div>

接下来在autoStartStopVm组件里，我们需要通过ActivatedRoute来获取传递过来的选中值：

目标组件类（autoStartStopVm.component.ts） #

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-auto-start-stop-vm',
  templateUrl: './auto-start-stop-vm.component.html',
  styleUrls: ['./auto-start-stop-vm.component.css']
})
export class AutoStartStopVmComponent implements OnInit {
  receivedOption: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅查询参数的变化，获取传递过来的选中值
    this.route.queryParams.subscribe(params => {
      this.receivedOption = params['selected'];
      if (this.receivedOption) {
        console.log('从下拉列表传过来的值：', this.receivedOption);
        // 这里可以根据这个值做后续业务逻辑
      }
    });
  }
}

如果你不想用?selected=xxx这种查询参数的形式，也可以把参数直接放在路由路径里。比如先修改路由配置：

// 在你的路由模块里
const routes: Routes = [
  // ...其他路由
  { path: 'schedulemanagement/autoStartStopVm/:selected', component: AutoStartStopVmComponent }
];

然后修改跳转逻辑：

// 在selectAndNavigate方法里
this.router.navigate(['/schedulemanagement/autoStartStopVm', option]);

最后在目标组件里用paramMap获取：

// 目标组件的ngOnInit里
this.route.paramMap.subscribe(params => {
  this.receivedOption = params.get('selected');
});

这样就完整实现了“捕获下拉选中值 → 路由跳转传参 → 目标组件接收值”的流程啦～

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