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>

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

将这种勇气软糖用于此类物品，您可以使用输入表单组和模式组件之间的公共服务来执行此操作，但这是一个阻力。

按照我的理解，请查看上面的链接，它将为您完成这项工作。

Answer 2

您可以使用Subject（来自“ 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（）秒（不是模式组件）的最后，您订阅了此Subject并使用所需的数据进行处理：

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

或者，如果要在Init组件上获得初始状态，则可以使用BehaviorSubject代替Subject。

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

2 个答案: