Angular兄弟组件间将Select选中值传递至Input文本框

针对你遇到的问题——选择公司/车间后跳转新页面，将选中值显示在目标Input中，以下是可行的解决步骤：

1. 完善选择组件的选中值绑定与跳转逻辑 #

首先要给Select添加双向绑定，获取用户选中的内容，再通过路由导航把参数传递到目标页面。

修改后的Select组件代码：

<select class="form-select" [(ngModel)]="selectedEmpresa">
  <option disabled value="">SELECCIONA LA EMPRESA</option>
  <option [value]="item" *ngFor="let item of empresa">{{item}}</option>
</select>

<!-- 「订单」按钮的跳转逻辑 -->
<button (click)="navigateToOrder()">订单</button>

对应的TS代码：

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

@Component({
  selector: 'app-select-comp',
  templateUrl: './select-comp.component.html'
})
export class SelectCompComponent {
  empresa = ['Empresa A', 'Empresa B', 'Empresa C']; // 示例数据
  selectedEmpresa: string = '';

  constructor(private router: Router) {}

  navigateToOrder() {
    if (this.selectedEmpresa) {
      // 带query参数跳转至订单页面
      this.router.navigate(['/order'], {
        queryParams: { selectedEmpresa: this.selectedEmpresa }
        // 若需传递车间参数，可添加：selectedWorkshop: this.selectedWorkshop
      });
    }
  }
}

2. 在目标Input组件中接收并显示参数 #

目标组件需要监听路由的query参数，拿到传递的值后绑定到Input上。

修改后的Input组件代码：

<div>
  <div class="badge bg-primary text-wrap">
    <input type="text" [(ngModel)]="empresaValue" readonly />
  </div>
</div>

对应的TS代码：

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

@Component({
  selector: 'app-input-comp',
  templateUrl: './input-comp.component.html'
})
export class InputCompComponent implements OnInit {
  empresaValue: string = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 订阅query参数变化，获取传递的值
    this.route.queryParams.subscribe(params => {
      this.empresaValue = params['selectedEmpresa'] || '';
      // 若有车间参数：this.workshopValue = params['selectedWorkshop'] || '';
    });
  }
}

你之前用queryParams失败的常见原因 #

• 未给Select绑定[(ngModel)]，导致无法获取用户选中的实际值
• 导航时未正确配置queryParams参数，或者路由路径写错
• 目标组件未订阅queryParams，或者没有把参数赋值给Input的绑定变量
• 初始选项未设为disabled且值为空，导致默认选中的提示项被当作有效值传递

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