angular - 如何将值从模态窗口传递到输入

Question

有两个组件。其中一个组件是输入组。通过单击按钮打开一个带有位置列表的模式窗口。

<div class="form-group form-black">
  <label class="control-label">Position<label style="color:red;">*</label></label>
  <div class="input-group">
    <input type="text" class="form-control" id="positions_id" #positions_id='ngModel' name="positions_id" [(ngModel)]="user.positions_id" required>  
    <span type="submit" class="input-group-addon btn btn-info" (click)="onOpenModule();">Change position</span>
  </div>
</div>

第二个组件是模态窗口本身。所以当我打开这个模态窗口并选择位置然后单击“应用”按钮时，这篇文章应该输入到输入中。下面是如何实现“应用”按钮的功能？

html:

  <div class="col-md-12">
      <table class="table table-hover">
        <thead>
          <tr >
            <th ><b>Position</b></th>
          </tr>
        </thead>
        <tbody>
          <tr class="{{selectedPosition == position ? 'active' : ''}}" *ngFor="let position of positions" (click)="updateSelectedPosition(position?.position_id)">
            <td>{{position.name}} </td>
          </tr>
        </tbody>
      </table>
  </div>
  <div class="col-md-12">
      <button type="submit" [disabled]="!selectedPositon?.name" class="btn btn-info pull-right">Apply</button>

  </div>

:

import { Component, OnInit } from '@angular/core';
import { DialogRef, ModalComponent } from 'angular2-modal';
import { BSModalContext } from 'angular2-modal/plugins/bootstrap';
import { PositionService} from '../../../../services/position/position.service';
import { Position } from '../../../../models/position.model';
import { AuthService } from '../../../../services/auth/auth.service';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-position-modal',
  templateUrl: './position-modal.component.html',
  styleUrls: ['./position-modal.component.scss'],

})
export class PositionModalComponent  implements ModalComponent<any> {


  positions: Array<Position>;
  selectedPosition = null;


  constructor(
    public dialog: DialogRef<any>,
    public authService: AuthService, 
    private servPosition: PositionService
  ) { 
    this.positions = new Array<Position>();
  }

  ngOnInit() {
    this.loadPositions();
  }

  private loadPositions() {
    this.servPosition.getPositions().subscribe(positions => this.positions = positions);
  }


  updateSelectedPosition(PositionId) {
    this.selectedPosition = this.positions.find(el => {
      return el.position_id === PositionId
    })
  }

}

Answer 1

https://valor-software.com/ngx-bootstrap/#/modals#confirm-window

使用这种 valor soft 来处理这些东西，您可以使用输入表单组和模态组件之间的公共(public)服务来做到这一点，但这是一种拖累。

请查看上面的链接，据我所知，它将为您完成这项工作。