如何将一个组件的模态窗口中的值传递给另一个组件的输入？

Question

我有一个只有模态的组件和另一个具有按钮 Edit position 的组件，单击该按钮会打开模态组件。选择位置后，模态关闭，所选值必须发送到打开它的组件上的输入元素。有人可以帮我了解如何将选定的值从模态传递到另一个组件的输入吗？

html:

<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="spr_position_id" #spr_position_id='ngModel' name="spr_position_id" [(ngModel)]="user.spr_position_id" required>  
     <span type="submit" class="input-group-addon btn btn-info" (click)="onOpenModule();">Edit position</span>
  </div>
</div>

modal.html:

<div class="card">
  <div class="card-header">
    <h4 class="title">Select a position</h4>
  </div>
  <div class="row">
    <div class="card-content table-responsive ">
      <div class="col-md-12">
        <div class="form-group form-black label-floating ">
          <input placeholder="Search…" type="text" [(ngModel)]="term" class="form-control" >
        </div>
      </div>
      <div class="col-md-12">
        <table class="table table-hover">
          <thead>
            <tr>
              <th [class.active]="key === 'name'" (click)="setOrder('name')"><b>Position<span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span></b></th>
            </tr>
          </thead>
          <tbody>
            <tr  *ngFor="let spr_position of spr_positions | orderBy: key:reverse | filter:term">
              <td>{{spr_position.name}} </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md-12">
          <button type="submit" (click)="cancel();" class="btn btn-warning pull-left">Close</button>
          <button type="submit"  class="btn btn-info pull-right">Choose</button>
      </div>
    </div>
  </div>
</div>

modal.ts:

import { Component, OnInit } from '@angular/core';
import { DialogRef, ModalComponent } from 'angular2-modal';
import { BSModalContext } from 'angular2-modal/plugins/bootstrap';
import { SprPositionService} from '../../../services/spr-position/spr-position.service';
import { SprPosition } from '../../../models/spr-position.model';
import { Angular2TokenService } from "angular2-token";
import { OrderPipe } from 'ngx-order-pipe';

declare let moment: any;

@Component({
  selector: 'app-spr-position-modal',
  templateUrl: './spr-position-modal.component.html',
  styleUrls: ['./spr-position-modal.component.scss'],
  providers: [SprPositionService]
})
export class SprDolgModalComponent  implements ModalComponent<any> {

  spr_positions: Array<SprDolg>;
  key = 'name';
  reverse = false; 

  constructor(
    public dialog: DialogRef<any>,
    private orderPipe: OrderPipe, 
    public authTokenService: Angular2TokenService, 
    private servSprPosition: SprPositionService
  ) { 
    this.spr_positions = new Array<SprPosition>();
  }

  ngOnInit() {
    this.loadSprPositions();
  }

  private loadSprPositions() {
    this.servSprPosition.getSprPositions().subscribe((data: SprPosition[]) => {
      this.spr_positions = data;  
    });
  }

  setOrder(key) {
    this.key = key;
    this.reverse = !this.reverse;
  }

  cancel(): void {
    this.dialog.close(null);
  }
}

Answer 1

尝试使用 evnet 发射器，它应该可以工作。 参考这个链接 https://angular.io/guide/component-interaction

Answer 2

您可以在对话框关闭时传递数据

在 modal.ts this.dialog.close(data);

在component.ts中

onOpenModule(){
 const dialogRef = this.dialog.open... 
 ...
 ...

 dialogRef.afterClosed().subscribe(data => {
  // you can bind data to your model (this.user.spr_position_id = data )
});
}

Answer 3

在我的例子中，我有显示用户列表的 UserListComponent，当单击编辑按钮时，它会打开一个带有 UserFormComponent 的模态。当用户窗体关闭时，我可以使用this.dialog.close(data);（在用户窗体组件中）将一些数据发送回用户列表组件并捕获数据dialog.result.then(data => console.log(data))（在用户列表组件中）

// UserListComponent
import { Modal, BSModalContext } from 'ngx-modialog/plugins/bootstrap';
import { overlayConfigFactory } from 'ngx-modialog';

  constructor(
    public modal: Modal,
 ) { }

 editUser() {
   const dialog = this.modal.open(
      UserFormComponent, overlayConfigFactory({user: {userData}, isEdit: true}, BSModalContext));

   dialog.result.then( data => console.log(data))
 }

// UserFormComponent
import { DialogRef } from 'ngx-modialog';
import { Modal, BSModalContext } from 'ngx-modialog/plugins/bootstrap';

  constructor(
    public dialog: DialogRef<BSModalContext>,
   ) {
    this.user = dialog.context['user'];
    this.isEdit = dialog.context['isEdit'] ? dialog.context['isEdit'] : false;
 }

  save(): void {
    this.dialog.close('Hello World');
  }