如何将值从模式窗口传递到输入

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>

在第二个组件上是模式窗口本身。因此，当我打开这个模式窗口并选择职位，然后点击"Apply“按钮时，这篇文章应该会进入输入。下面是如何实现"Apply“按钮的功能？

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>

ts：

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软体来处理这些东西，你可以使用输入表单组和模态组件之间的公共服务来做这件事，但这是一个拖累。

检查上面的链接，将为您做的工作，因为我理解。

Answer 2

您可以使用Subject (来自"rxjs")将数据从一个组件发送到另一个组件。例如。您在其中声明的create someService -

someSubject: Subject<any> = new Subject<any>();

然后，描述(单击)在以下位置应用按钮的方法：

this.someService.someSubject.next("<here is the data which you want to send to another component (selectedPosition)>")

最后，在ngOnInit()的第二个(非模态组件)中，您订阅了此主题，并对此数据执行了您想要的操作：

this.someService.someSubject.subscribe(position => {
            if (position) {
 // here you code with sending from modal window data
            }
        }));

或者，如果想要获取初始状态onInit组件，可以使用BehaviorSubject代替Subject。