Question

我有一个只包含模态的组件，另一个有一个按钮编辑位置的组件，单击该按钮将打开“模态”组件。选择位置后，模态关闭，所选值必须发送到打开它的组件上的输入元素。有人可以帮助我如何将选定值从模态传递到另一个组件的输入吗？

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的模态。关闭UserForm后，我可以使用this.dialog.close(data);（在UserFormComponent中）将一些数据发送回UserListComponent，并捕获数据dialog.result.then(data => console.log(data))（在UserListComponent中）

// 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');
  }

如何从一个组件上的模态窗口传递值到另一组件上的输入？

3 个答案: