Angular 通过模式服务将数据传递给组件

我在Angular 7中有一个模态服务，用作：

如何通过模式服务与HelloComponent共享数据

this.modalService.open(HelloComponent, { property: 'hello' });

不知道如何改变我的服务来实现这一点。我认为：

this.componentRef = this.componentFactoryResolver.resolveComponentFactory(component.component).create(this.injector);

this.componentRef.instance.modal = this;

this.appRef.attachView(this.componentRef.hostView);

return (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

this.componentRef=this.componentFactoryResolver.resolveComponentFactory（component.component）.create（this.injector）；
this.componentRef.instance.modal=this；
this.appRef.attachView（this.componentRef.hostView）；
返回（this.componentRef.hostView作为EmbeddedViewRef）.rootNodes[0]作为HtmleElement；

ModalService

import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injectable, Injector } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ModalService {

  private componentRef: any;
  private modalContainer: any;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector) { }

  private createFormModal(component: any): Element {

    this.componentRef = this.componentFactoryResolver.resolveComponentFactory(component.component).create(this.injector);

    this.componentRef.instance.modal = this;

    this.appRef.attachView(this.componentRef.hostView);

    return (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

  }

  open(component: any): void {

    const alertElement = this.createFormModal(component);

    const content = document.createElement('div');
    content.classList.add('modal');
    content.appendChild(alertElement);

    this.modalContainer = document.createElement('div');
    this.modalContainer.classList.add('modal');
    this.modalContainer.appendChild(content);

    document.body.appendChild(this.modalContainer);

  }

  close(): void {
    this.appRef.detachView(this.componentRef.hostView);
    this.modalContainer.parentNode.removeChild(this.modalContainer);
    this.componentRef.destroy();
  }

}

import{ApplicationRef，ComponentFactoryResolver，EmbeddedViewRef，Injectable，Injector}来自“@angular/core”；
@注射的({
providedIn:'根'
})
导出类ModalService{
私有组件参考：任何；
私人modalContainer：任何；
建造师(
专用componentFactoryResolver:componentFactoryResolver，
私有appRef:ApplicationRef，
专用注入器：注入器）{}
私有createFormModal（组件：任意）：元素{
this.componentRef=this.componentFactoryResolver.resolveComponentFactory（component.component）.create（this.injector）；
this.componentRef.instance.modal=this；
this.appRef.attachView（this.componentRef.hostView）；
返回（this.componentRef.hostView作为EmbeddedViewRef）.rootNodes[0]作为HtmleElement；
}
打开（组件：任意）：无效{
const alertElement=this.createFormModal（组件）；
const content=document.createElement（'div'）；
content.classList.add（'modal'）；
content.appendChild（alertElement）；
this.modalContainer=document.createElement（'div'）；
this.modalContainer.classList.add（'modal'）；
this.modalContainer.appendChild（内容）；
document.body.appendChild（this.modalContainer）；
}
close（）：void{
this.appRef.detachView（this.componentRef.hostView）；
this.modalContainer.parentNode.removeChild（this.modalContainer）；
this.componentRef.destroy（）；
}
}

看起来您正在尝试创建自己的模式类/服务。作为参考，我建议您在项目中使用ng引导模式对话框，然后探索NGBActiveModel类是如何设计的

import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injectable, Injector } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ModalService {

  private componentRef: any;
  private modalContainer: any;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector) { }

  private createFormModal(component: any): Element {

    this.componentRef = this.componentFactoryResolver.resolveComponentFactory(component.component).create(this.injector);

    this.componentRef.instance.modal = this;

    this.appRef.attachView(this.componentRef.hostView);

    return (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

  }

  open(component: any): void {

    const alertElement = this.createFormModal(component);

    const content = document.createElement('div');
    content.classList.add('modal');
    content.appendChild(alertElement);

    this.modalContainer = document.createElement('div');
    this.modalContainer.classList.add('modal');
    this.modalContainer.appendChild(content);

    document.body.appendChild(this.modalContainer);

  }

  close(): void {
    this.appRef.detachView(this.componentRef.hostView);
    this.modalContainer.parentNode.removeChild(this.modalContainer);
    this.componentRef.destroy();
  }

}