Я пытаюсь реализовать базовую (очень простую) модальную реализацию. У меня есть ModalService
и ModalComponent
.
ModalService
создает экземпляр ModalComponent
и внедряет его на страницу с помощью @angular/cdk/portal.
Я могу заставить модальное окно отображаться просто отлично :-)
У ModalComponent
есть свойство Observable, на которое я хочу подписаться ModalService
, чтобы при нажатии кнопки «закрыть» в модальном окне можно было выдать значение, а ModalService
могло закрыть модальное окно.
Однако когда компонент выдает значение, Служба не воздействует на него. Со стороны службы это выглядит так, как будто я подписан, но со стороны компонента показывает 0 наблюдателей.
Я подумал, может быть, я мог бы использовать типичный @Output()
EventEmitter, но я не уверен, что смогу его подключить, так как в модальном классе, поскольку дочерний элемент изначально не существует.
Я думаю, может быть, ссылка на мой компонент не совсем правильная (может быть, у меня 2 разных?). Я пробую предложение из этот ответ
Любые идеи, что я делаю неправильно?
Сервис
export class ModalService {
private modalPortal: ComponentPortal<any>;
private bodyPortalHost: DomPortalHost;
constructor(private componentFactoryResolver: ComponentFactoryResolver,
private appRef: ApplicationRef,
private injector: Injector) {
}
showModal(modalName: string) {
// set up the portal and portal host
this.modalPortal = new ComponentPortal(ModalComponent);
this.bodyPortalHost = new DomPortalHost(
document.body,
this.componentFactoryResolver,
this.appRef,
this.injector);
// display the component in the page
let componentRef = this.bodyPortalHost.attach(this.modalPortal);
// listen for modal's close event
componentRef.instance.onModalClose().subscribe(() => {
console.log('I will be very happy if this this gets called, but it never ever does');
this.closeModal();
});
// console.log(componentRef.instance.onModalClose()) shows 1 subscriber.
}
closeModal() {
this.bodyPortalHost.detach();
}
}
Компонент
export class ModalComponent {
private modalClose: Subject<any> = new Subject();
onModalClose(): Observable<any> {
return this.modalClose.asObservable();
}
closeModal() {
// console.log(this.onModalClose()) **shows zero observers** :-(
this.modalClose.next();
this.modalClose.complete();
}
}
Кроме того, если я задаю неправильный вопрос, имея в виду, что есть лучший общий подход, я открыт для предложений. :-)
Спасибо!
this
, чтобы указать, что свойство является частью класса. (он жеconsole.log(onModalClose())
должен бытьconsole.log(this.onModalClose())
- person Edric   schedule 30.09.2018this
, я просто по ошибке пропустил его в своем вопросе. Я обновил код выше. - person BizzyBob   schedule 30.09.2018