Question

我需要帮助从ngbModal组件获取结果。

我用链接打开模态

<a class="order-collection-options-link" (click)="openTimePicker()">{{'ORDER_COLLECTION_OPTIONS_LABEL' | dict}}</a>

这是我的openTimePicker（）方法

openTimePicker() {
    const modalRef =     this.modalService.open(DateTimePickerModalComponent);
    console.log(modalRef.componentInstance);
}

我的DateTimePickerModalComponent。它有两个按钮APPLY和OK，每个按钮都发出onApplySelection和onConfirmSelection ...

@Component({
  selector: 'date-time-picker-modal',
  styleUrls: ['./dateTimePickerModal.component.scss'],
  templateUrl: './dateTimePickerModal.component.html',
})

export class DateTimePickerModalComponent {

private selection : Date[] = [];

  @Output() onApplySelection: EventEmitter<Date> = new EventEmitter<Date>();
  @Output() onConfirmSelection: EventEmitter<Date[]> = new EventEmitter<Date[]>()

    ...


}

所以我需要知道如何将我的“父”组件附加到open（）方法中的那些事件。

Answer 1

在搜索网之后，这就是我想出来的，并且应该是这样做的方式。注意我的组件不是真正的PARENT CHILD关系..所以我实现了服务并使用了订阅方法。

@Injectable()
export class DateTimePickerModalService {

  private confirmedSelectionSource = new Subject<Date[]>();
  private appliedSelectionSource = new Subject<Date>();

  confirmedSelection$ = this.confirmedSelectionSource.asObservable();
  appliedSelection$ = this.appliedSelectionSource.asObservable();


  constructor() {

  }

  confirmSelection(selection : Date[]) {
    this.confirmedSelectionSource.next(selection);
  }


  applySelection(selectedDate : Date) {
    this.appliedSelectionSource.next(selectedDate);
  }

}

并将其添加到providers []

中的app.modules.ts

并且在我的服务中需要告知这些更改我实现了subscribe（）方法

constructor(..., private dateTimePickerModalService: DateTimePickerModalService) {
    ...
    dateTimePickerModalService.confirmedSelection$.subscribe(
      days => {
        console.log('got days:', days);
      },
      error => {
        console.log('error');
      }
    );
    dateTimePickerModalService.appliedSelection$.subscribe(
      day => {
        console.log('got day:', day);
      },
      error => {
        console.log('error');
      }
    );

}

如何从ngbModal组件中获取结果

1 个答案: