custom modal dialog with dynamic template - angular material

问题

I'm trying to implement a modal dialog with a dynamic component and custom template. I'm able to implement the same however the dialog opens 'n' times. (first call 1 dialog, 2nd call 2 dialog and so on)

The modal will be opened any other component with the HelperService injected and by calling the openModal() method with a component as parameter.

Sorry for a lengthy post.

./custom-modal.component.ts

 @Component({
        selector: 'custom-modal',
        templateUrl: './custom-modal.component.html'
    })

export class CustomModalComponent implements OnInit, AfterViewChecked {
@ViewChild('dynamic', {read: ViewContainerRef}) dynamicComponent: ViewContainerRef;
private subscription: any = null;
private componentRef: ComponentRef<{}>;
private component: any;
modalProperties$: Observable<any>;
showDialog: boolean = false;
constructor(private helperService: HelperService,
            private componentFactoryResolver: ComponentFactoryResolver,
            private changeRef: ChangeDetectorRef) {
        this.modalProperties$ = this.helperService.modalProperties$;
        if (!this.showDialog) {
            this.subscription = this.helperService.dynamicComponent$.subscribe( component => {
             if (component) {
                console.log('Inside Subscribe');
                this.component = component;
                this.showDialog = true;
             }
            });
        }
}

ngAfterViewChecked() {
        this.changeRef.detectChanges();
        let viewContainerRef: any;
        let componentFactory: any;
        if (this.component) {
            componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.component);
            this.componentRef = this.dynamicComponent.createComponent(componentFactory);
            viewContainerRef = this.componentRef;
            this.component = undefined;
            this.showDialog = false;
        }
}

}

./helper.service.ts

@Injectable()
export class HelperService {


private _dynamicComponent: BehaviorSubject<ComponentType<any>> = new BehaviorSubject<any>(undefined);
dynamicComponent$: Observable<ComponentType<any>>;

constructor() {
    this.dynamicComponent$ = this._dynamicComponent.asObservable();
}

openModal(component: ComponentType<any>) {
    this._dynamicComponent.next(component);    
}

}

./custom-modal.directive.ts

@Directive({ selector: '[modal], modal' })
export class CustomModalDirective {
    private dialogRef: MdDialogRef<any>;
    private modalConfig: MdDialogConfig;

   constructor( private dialog: MdDialog, private templateRef: TemplateRef<any>,
                private helperService: HelperService ) {
        this.helperService.modalConfig$.subscribe(modalConfig => {
                this.dialog.open( this.templateRef , modalConfig);
        });
    }
    openModal(template: TemplateRef<any>) {
        if (!this.dialogRef) {
            this.dialogRef = this.dialog.open(template, this.modalConfig);
        }
    }
}

./custom-modal.component.html

<ng-container *ngIf="showDialog">
<div *modal>
<h2 md-dialog-title>
    <span> Welcome all </span>
    <span >
        <md-icon class="close" ></md-icon>
    </span>
</h2>
<md-dialog-content>
    <div #dynamic>Hii</div>        
</md-dialog-content>
</div>

`

来源：https://stackoverflow.com/questions/46243651/custom-modal-dialog-with-dynamic-template-angular-material