Как подписаться на Observable компонента, внедренного через @ angular / cdk / portal?

Question

Я пытаюсь реализовать базовую (очень базовую) модальную реализацию.У меня есть 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();
    }
}

Кроме того, если мне задают неправильный вопрос, то есть есть лучший общий подход, я открыт для предложений.: -)

Спасибо!

Answer 1

Этот код работает для меня с очень небольшими изменениями, поэтому я не понимаю, в чем ваша проблема.Сначала я создал проект с Angular CLI, используя ng new.Затем я установил ng материал, используя инструкции на их сайте .

Я создал модальный сервис, который идентичен вашему:

    import {ApplicationRef, ComponentFactoryResolver, Injectable, Injector} from '@angular/core';
import {DomPortalHost, ComponentPortal} from "@angular/cdk/portal";
import {ModalComponent} from "./modal/modal.component";

@Injectable({
  providedIn: 'root'
})
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();
  }
}

Я создал модальный компонент.TypeScript такой же, как ваш:

import { Component, OnInit } from '@angular/core';
import {Observable, Subject} from "rxjs/index";

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  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();
  }

}

Вы не дали нам модель для HTML, но я использовал это:

<p>
  modal works!
</p>
<button (click)="closeModal()">Close Modal</button>

Вот мое приложение.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import {ModalService} from "src/app/modal.service";
import { ModalComponent } from './modal/modal.component';

@NgModule({
  declarations: [
    AppComponent,
    ModalComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [ModalService],
  bootstrap: [AppComponent],
  entryComponents: [ModalComponent]
})
export class AppModule { }

Примечание I Определил ModalComponent в entryComponents и ModalService в качестве поставщика.

App.component HTML:

<button (click)="showModal()">Show Modal</button>

Имашинный набор app.component:

import { Component } from '@angular/core';
import {ModalService} from "./modal.service";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(public modalService: ModalService){}

  showModal(){
       this.modalService.showModal("This is the modal name");
  }

}

Я ввел ModalService в конструктор и вызвал ваш метод showModal в ответ на нажатие кнопки в главном приложении.

Загрузка приложения:

Нажмите кнопку, и появится модальное окно.Это не похоже на модальное, но это может быть из-за отсутствия стиля:

Теперь нажмите кнопку закрытия внутри модального окна:

Вы видите, что модал пропал, и на выходе консоли отображается ваше сообщение.

Помогает ли это сообщение найти пропущенный тидбит?

---

Одна вещь, которую нужно добавить.Если вы хотите отправить данные из вашего модального компонента в вызывающий его компонент, просто измените метод closeModal вашего modalComponent:

  closeModal() {
    // console.log(this.onModalClose()) **shows zero observers**   :-(
    this.modalClose.next('Your Data Here, it can be an object if need be');
    this.modalClose.complete();
  }

И ваша модальная служба может получить доступ к данным в методе onModalClose().subscribe():

componentRef.instance.onModalClose().subscribe((results) => {
  console.log(results);
  console.log('I will be very happy if this this gets called, but it never ever does');
  this.closeModal();
});