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

【问题标题】：How to pass values from a modal window to an input如何将值从模式窗口传递到输入
【发布时间】：2018-11-10 23:39:01
【问题描述】：

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

<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>

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
    })
  }

}

【问题讨论】：

您尝试过使用服务吗？
@karoluS 什么服务？
@Injectable 服务类
@SujathaGirijala 那么不，你能详细说明我如何自己应用它吗？
要么按照建议使用服务，要么 - 如果组件处于父/子关系中 - 使用 @output。如果您不了解服务或@output，请查看官方文档和教程。

标签： angular

【解决方案1】：

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

用这种勇气来做这些事情，你可以使用输入表单组和模态组件之间的公共服务来做到这一点，但这是一个拖累。

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

【讨论】：

【解决方案2】：

您可以使用主题（来自“rxjs”）将数据从一个组件发送到另一个组件。例如。您在其中声明的创建 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
            }
        }));

如果你想在初始化组件上获得初始状态，你可以使用 BehaviorSubject 代替 Subject。

【讨论】：