Question

如何在不使用指令的情况下将选定的下拉列表值从角度2传递到另一个组件。我可以获得选定的值但无法传递给另一个组件。

<form class="form-group" >
    Select server: <select name="serverid" #selectedCategory>
    <option *ngFor="let serverItem of serverItems" value="">Choose Server</option>
    <option *ngFor="let serverItem of serverItems" value="{{serverItem.id}}">{{serverItem.name}}</option>
  </select>
  <p></p>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <button type="button" (click)="dialogRef.close('yes',getValueFromSelect(selectedCategory.value))">Submit</button>
  <button type="button" (click)="dialogRef.close('no')">Cancel</button>
  </form>

我的职责是：

getValueFromSelect(value){
    console.log("---log-getValueFromSelect--"+value);
    this.serverItemID=value;
  }

所以我想将此serverItemID值传递给其他组件。拖放到右侧面板后，我们将弹出窗口。

Answer 1

使用EventEmitter从一个组件发出数据并在另一个组件中侦听发出的数据。请参阅此link。

Answer 2

使用以下代码

子组件： HTML

<select  (change)="changedvalue($event)" required [(ngModel)]="selectedValue" name="industryType" id="industryType"  aria-describedby="sizing-addon1" class="select-custom">
                <option value="IT">IT</option>
                <option value="Business">Business</option>
                <option value="Engineering">Engineering</option>
                <option value="Teaching">Teaching</option>
                <option value="Marketing">Marketing</option>
      </select>

处理输出变量

changedvalue(val){
    this.emitValue.emit(this.selectedValue);
  }

将输出变量设为

@Output() emitValue: EventEmitter<string> = new EventEmitter<string>();

示例父组件

<common-modal  #childModal [title]="'common modal'"  (emitValue)="handleEmitValue($event)"> 

</common-modal>

将父组件中的事件处理为

handleEmitValue(val){
    console.log(val);
    this.value=val;
  }

LIVE DEMO 使用模态

如何在不使用指令的情况下将选定的下拉列表值从角度2传递到另一个组件

2 个答案: