带有动态模板的自定义模态对话框 - 角度材质

Question

我正在尝试使用动态组件和自定义模板实现模式对话框。我能够实现相同但是对话框打开'n'次。 （首先调用1对话框，第2调用2对话框等）

模式将打开注入HelperService的任何其他组件，并通过调用组件作为参数的openModal()方法。

很抱歉这篇文章太长了。

./定制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);    
}

}

./定制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);
        }
    }
}

./定制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>

`