将数据从模态返回到Angular中的组件

Question

我对 Angular 有另一个问题。我不知道如何从模态返回数据。一个对象列表显示在我的模式中，然后单击列表中的一个项目后，我将对象传递给函数。如何在另一个组件中接收这个对象？

modal-geoname.component.html

<ng-scrollbar #scrollable track="vertical" *ngIf="geonames.length > 0">
  <table class="table table-hover mb-0">
    <tbody>
      <tr *ngFor="let geoname of geonames; let i = index" style="cursor: pointer;" (click)="selectGeoname(geoname)">
        <th scope="row">{{ i+1 }}</th>
        <td><span class="flag-icon flag-icon-{{ geoname.country | lowercase }} mr-2"></span>{{ geoname.country }}, {{ geoname.zipcode }} {{ geoname.place }}</td>
        <td>{{ geoname.admin }}</td>
      </tr>
    </tbody>
  </table>
</ng-scrollbar>

modal-geoname.component.ts

export class ModalGeonameComponent implements OnInit {

  public geonames: Geoname[] = [];
  public selectedItem: Subject<boolean>;

  constructor(public bsModalRef: BsModalRef) {}

  selectGeoname(geoname: Geoname) {
    this.selectedItem.next(geoname);
  }

  ngOnInit() {
    this.selectedItem = new Subject();
  }

}

modal.service.ts

@Injectable({ providedIn: 'root' })
export class ModalService {

  bsModalRef: BsModalRef;

  constructor(private bsModalService: BsModalService) {}

  // ... other open modal functions ...

  showGeonameModal(geonames: Geoname[]) {
    this.bsModalRef = this.bsModalService.show(ModalGeonameComponent, {
      initialState: { geonames },
      class: 'modal-dialog modal-dialog-centered modal-lg',
      ignoreBackdropClick: true
    }).content.selectedItem.subscribe(selectedItem  => {
      console.log(selectedItem); 
      // I want to push selectedItem to itemList array in map-view.component.ts
    });
  }

}

ma​​p-view.component.ts

export class MapViewComponent {

  private searchCountry: string;
  private searchText: string;

  public itemList: Geoname[] = [];

  constructor(private geonameService: GeonameService, private modalService: ModalService) {}

  searchCity() {
    this.geonameService.getCity(this.searchText, this.searchCountry).subscribe((geonames) => {
      this.modalService.showGeonameModal(geonames);
      this.searchText = '';
    });
  }

}

我想将 selectedItem 传递给 itemList。请检查我的代码的正确性，因为我不想学习糟糕的编程。谢谢。

Answer 1

在BsModalService中是可能的：

构造函数（私有模式服务：BsModalService）

然后您可以通过以下方式使用：

const modal = this.modalService.show(ModalGeonameComponent);


(<ModalGeonameComponent>modal.content).onClose.subscribe(result => {
      if(result) {
        this.result = Object.assign({}, result);
        .....
      }
    });

Answer 2

您可以使用Component Interaction 实现此目的。如果 'ModalGeonameComponent' 组件是 'MapViewComponent' 的子组件，您可以使用 Output 属性将数据从子组件传递到父组件。 如果这两个组件处于同一级别（不是父子组件），您可以在它们之间创建一个共享服务（使用 Observables）并将数据从一个组件传递到另一个组件。有关更多说明，您可以查看此tutorial

Answer 3

感谢您的回答。现在我可以在变量 geoname 下的 MapViewComponent 中看到我的对象。但我还有一个问题。

程序的行为是这样的：我从模式中的列表中选择一个项目，然后将对象传递给 MapViewComponent，在那里我调用新函数 drawMap (object: Geoname) 并关闭模式。怎么做？如何关闭模态并调用函数？

我当前的代码：

modal-geoname.component.html

<ng-scrollbar #scrollable track="vertical" [ngStyle]="{'min-height': setScrollbarHeight() }" *ngIf="geonames.length > 0">
  <table class="table table-hover mb-0">
    <tbody>
      <tr *ngFor="let geoname of geonames; let i = index" style="cursor: pointer;" (click)="selectItem(geoname)">
        <th scope="row" style="width: 50px;">{{ i+1 }}</th>
        <td><span class="flag-icon flag-icon-{{ geoname.country | lowercase }} mr-2"></span>{{ geoname.country }}, {{ geoname.zipcode }} {{ geoname.place }}</td>
        <td>{{ geoname.admin }}</td>
      </tr>
    </tbody>
  </table>
</ng-scrollbar>

modal-geoname.component.ts

export class ModalGeonameComponent {

  private geonames: Geoname[] = [];

  constructor(private bsModalRef: BsModalRef, private dataService: DataService) {}

  selectItem(geoname: Geoname) {
    this.dataService.selectGeoname(geoname);
  }

}

data.service.ts

export class DataService {

  private geonameSource = new BehaviorSubject<Geoname>('');
  currentGeoname = this.geonameSource.asObservable();

  selectGeoname(geoname: Geoname) {
    this.geonameSource.next(geoname);
  }

}

modal.service.ts

@Injectable({ providedIn: 'root' })
export class ModalService {

  bsModalRef: BsModalRef;

  constructor(private bsModalService: BsModalService) {}

  showGeonameModal(geonames: Geoname[]) {
    this.bsModalRef = this.bsModalService.show(ModalGeonameComponent, {
      initialState: { geonames },
      class: 'modal-dialog modal-dialog-centered modal-lg',
      ignoreBackdropClick: true
    });
  }

}

ma​​p-view.component.ts

export class MapViewComponent implements OnInit {

  private searchCountry: string;
  private searchText: string;

  private geoname: Geoname;

  constructor(private dataService: DataService, private geonameService: GeonameService, private modalService: ModalService) {}

  ngOnInit() {
    this.dataService.currentGeoname.subscribe(geoname => {
      this.geoname = geoname;
    });
  }

  searchCity() {
    this.geonameService.getCity(this.searchText, this.searchCountry).subscribe((geonames) => {
      this.modalService.showGeonameModal(geonames);
      this.searchText = '';
    });
  }

}