Angular 动态将自定义组件注入到模态中

我编写了一个自定义的

模式

和一个

模式服务

，它们提供了两个打开和关闭模式的功能

现在，我有了另一个名为

选择列表

组件的组件，我想做的是动态注入级联选择到模式

viewContainerRef

让我困惑的是，当我通过modal的确认

按钮关闭modal时，如何获得结果

这是我的密码

modalComponent.ts
：

export class ModalComponent implements OnInit, AfterViewInit {

  isOpened: boolean = false;

  @Output() onCancel: EventEmitter<any> = new EventEmitter();

  @Output() onConfirm: EventEmitter<any> = new EventEmitter(false);

  // =======================
  // 公共属性
  // =======================

  @ViewChild('modalRoot') modalRoot: ElementRef;

  // =======================
  // 私有属性
  // =======================

  @ViewChild('modalBody', {read: ViewContainerRef}) dynamicTarget: ViewContainerRef;

  constructor() {
  }

  ngOnInit(): void {
    this.modalService.registerModal(this);
  }

  ngOnDestroy() {
  }
}

@Injectable()
export class ModalService {

  // 弹层实例对象
  private modal: ModalComponent;
  private componentRef: ComponentRef<Component>;
  private viewContainerRef: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  registerModal(newModal: ModalComponent): void {
    this.modal = newModal;
  }

  // create<T>(module: any, component: any, params?: Object): Observable<ComponentRef<T>> {
  //   let componentRef$ = new ReplaySubject();
  // }

  open(component, opt?: Object): ModalComponent {
    if (this.componentRef) {
      this.componentRef.destroy();
    }
    // 动态加载其它组件
    let factory = this.componentFactoryResolver.resolveComponentFactory(component);
    this.componentRef = this.modal.dynamicTarget.createComponent(factory);
    this.modal.isOpened = true;
    return this.modal;
  }

  close(): void {
    this.modal.isOpened = false;
  }
}

this.modalService.open(SelectListComponent);

modalService.ts
：

export class ModalComponent implements OnInit, AfterViewInit {

  isOpened: boolean = false;

  @Output() onCancel: EventEmitter<any> = new EventEmitter();

  @Output() onConfirm: EventEmitter<any> = new EventEmitter(false);

  // =======================
  // 公共属性
  // =======================

  @ViewChild('modalRoot') modalRoot: ElementRef;

  // =======================
  // 私有属性
  // =======================

  @ViewChild('modalBody', {read: ViewContainerRef}) dynamicTarget: ViewContainerRef;

  constructor() {
  }

  ngOnInit(): void {
    this.modalService.registerModal(this);
  }

  ngOnDestroy() {
  }
}

@Injectable()
export class ModalService {

  // 弹层实例对象
  private modal: ModalComponent;
  private componentRef: ComponentRef<Component>;
  private viewContainerRef: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  registerModal(newModal: ModalComponent): void {
    this.modal = newModal;
  }

  // create<T>(module: any, component: any, params?: Object): Observable<ComponentRef<T>> {
  //   let componentRef$ = new ReplaySubject();
  // }

  open(component, opt?: Object): ModalComponent {
    if (this.componentRef) {
      this.componentRef.destroy();
    }
    // 动态加载其它组件
    let factory = this.componentFactoryResolver.resolveComponentFactory(component);
    this.componentRef = this.modal.dynamicTarget.createComponent(factory);
    this.modal.isOpened = true;
    return this.modal;
  }

  close(): void {
    this.modal.isOpened = false;
  }
}

this.modalService.open(SelectListComponent);

appComponent.html
：

<!-- 弹层 S -->
<div class="modal-mask" [ngStyle]="{display: isOpened ? 'block': 'none'}"></div>
<div class="modal" role="popup-dialog" #modalRoot [ngStyle]="{display: isOpened ? 'block': 'none'}">
  <div [class]="'modal-dialog ' + clazz" #modalDialog (click)="preventClosing($event)">
    <div class="modal-content" tabindex="0">
      <div class="modal-header">
        <ng-content select="[modal-header]"></ng-content>
      </div>
      <div class="modal-body">
        <span #modalBody></span>
      </div>
      <div class="modal-footer">
        <button *ngIf="cancelButtonLabel.length > 0" (click)="cancel()" class="button cancel" #cancelButton [class.full-fill]="
      !confirmButtonLabel">{{cancelButtonLabel}}</button>
        <button *ngIf="confirmButtonLabel.length > 0" (click)="confirm()" class="button primary" #confirmButton [class.full-fill]="!cancelButtonLabel">{{confirmButtonLabel}}</button>
      </div>
    </div>
  </div>
</div>
<!-- 弹层 E -->

<mcare-modal #mcareModal
title="自定义弹窗"
cancelButtonLabel="取消"
confirmButtonLabel="确定"
(onConfirm)="actionOnConfirm($event)"
[modalId]="modalId">
<div modal-header>
  <div class="row-control">
    <h4 class="title">{{modalTitle}}</h4>
  </div>
</div>


{{modalTitle}}


缩略图