获取错误打开模态时打开未定义

Question

在我的项目中，我正在为删除条目打开一个确认对话框。为此，我正在制作一个可以轻松在项目中的任何位置使用的通用组件。

我检查堆栈溢出和其他许多链接的所有链接，但没有得到任何帮助。

这是我的代码。 （所有必要的进口已经完成）

Confirmation.component.ts

@Injectable()
export class Confirmation {

    constructor(public sharedResource: Shared) {
            this.sharedData = sharedResource.SharedComponent;
        this.sharedData.deleteConfirmation = this;
    }

    @ViewChild('deleteConfirmationModal') public modal: Ng2Bs3ModalModule;
    @Output() OnConfirmClicked = new EventEmitter();
    public sharedData: SharedModel;
    public title: string = "Action Required";
    public confirmationText: string = "";
    public confirmationHeader: string = "Remove";
    public icon: string = 'create-account-icon.png';
    public isShowOnlyAlert: boolean = false;
    inputValue: any;
    parentComponent: any = null;
    callBackMethodName: string = 'Remove';
    public isShowDiffMsg: boolean = false;

    public Open(name: any, parentComponent: any, methodName: string, item: any = null, headername: any = null, isObjectComparision: any = false, isShowOnlyAlert: any = false): void {        
        this.inputValue = item;
        this.parentComponent = parentComponent;
        this.callBackMethodName = methodName;
        this.isShowOnlyAlert = isShowOnlyAlert;
        if (isObjectComparision) {
            this.icon = 'ic-alert.png';
            this.confirmationText = name;
            this.confirmationHeader = headername;
        }
        else {
            this.icon = 'create-account-icon.png';
            this.confirmationHeader = 'Remove';
            this.confirmationText = "Do you really want to delete " + name + "?";
        }
        this.sharedResource.GoToNextModal(this.modal);

    }

    public OnConfirm(): void {
        try {
            if (this.parentComponent != null) {
                this.parentComponent[this.callBackMethodName](this.inputValue);
            }
            else {
                this.OnConfirmClicked.emit(this.inputValue);
            }

        }
        catch (e) {
            console.log((<Error>e).message);
        }
    }

    public Close(): void {
        this.OnConfirmClicked.emit(this.inputValue);
    }
}

Confirmation.component.html

<modal data-backdrop="static" #deleteConfirmationModal id="deleteConfirmationModal" [size]="'sm'" tabindex="-1">
    <modal-header [show-close]="true">
        <h5 class="modal-title pl35">
            <img src="images/{{icon}}" alt="" />
            {{confirmationHeader}}
        </h5>
        <ul>
            <li><a href="javascript:;" title="Close" data-dismiss="modal"><img src="images/modal-close.png" alt=""></a></li>
        </ul>
    </modal-header>
    <modal-body>
        <p class="line-breaker">{{confirmationText}}</p>
    </modal-body>
    <modal-footer>
        <div *ngIf="!isShowOnlyAlert">
            <button id="btnYes" type="button" class="btn btn-primary" (click)="OnConfirm()">Yes</button>
            <button id="btnNo" type="button" class="btn btn-default" (click)="Close()">No</button>
        </div>
        <div *ngIf="isShowOnlyAlert">
            <button id="btnOk" type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
        </div>
    </modal-footer>
</modal>

在我想要使用此确认对话框的组件中

lookupEntry.component.ts

export class LookupMasterComponent implements OnInit {

 constructor(public sharedResource: Shared,public frameworkService: FrameworkServices) {
         this.sharedData = sharedResource.SharedComponent;
    }
      public OnActionClicked(action) {
        if (action.actionName === 'Edit') {
            this.lookup = action.row;
            this.addLookupComponent.EditLookup(this.lookup);
        } else if (action.actionName === 'Delete') {
            this.id_deleteLookup = action.row.LookupDetailID;
            this.lookupName = action.row.Name;
            this.sharedData.deleteConfirmation.Open("Are you sure you want to delete '" + this.lookupName + "'? <br /> All releated data to '" + this.lookupName + "' will permanently removed.", this, "DeleteLookupDetail", toolbar, "Confirmation", true)
        }
    }
     public DeleteLookupDetail() {
        console.log(this.id_deleteLookup);
        this.frameworkService.DeleteLookupDetail(this.id_deleteLookup).subscribe((data: any) => {
            // console.log(data);
            // this.deleteLookupModal.close();
            this.GetLookupDetails();
        });
    }

}

我收到null / undefined打开错误。

shared.ts

import { Injectable } from "@angular/core";
import { Confirmation } from "../confirmation/confirmation.component";
    export interface SharedModel {
        templateData: any;
        templateType: any;
        deleteConfirmation: Confirmation;
        loaderDivId: string;
        EditorList: any;
    }

    @Injectable()
    export class Shared {

        SharedComponent: SharedModel = {
            templateData: [],
            templateType: [],
             loaderDivId: 'dynamicTabs',
            EditorList: [],
            deleteConfirmation: null,
        };

        constructor() {

        }

        GoToNextModal(modal: any) {

            this.SharedComponent.loaderDivId = modal.element.nativeElement.id;

            if (this.SharedComponent.EditorList.length > 0) {
                this.SharedComponent.EditorList[this.SharedComponent.EditorList.length - 1].close();
                this.SharedComponent.EditorList.push(modal);
                this.SharedComponent.EditorList[this.SharedComponent.EditorList.length - 1].open();
            }
            else {
                this.SharedComponent.EditorList.push(modal);
                modal.open();
            }
        }
    }