Question

我已经在angular 7应用程序中实现了一个共享模态窗口，并使用模态来显示firmcomponent。模态的声明，打开和关闭是在作为父组件的strategycomponent中完成的。正如您在firmcomponent html中看到的那样，我已经实现了EditMode，该模式以编辑或只读模式显示表单。编辑模式可以正常运行，但是我当前面临的问题是在弹出窗口加载并关闭窗口后，单击编辑模式后，重新打开窗体时，该窗体仍处于编辑模式。我试图在strategycomponent的打开和关闭方法中将editmode重置为false，但这似乎没有触发。我相信这可能会发生，因为关闭模型并不会破坏模式，而只是隐藏它谁能说出问题所在。

UI屏幕截图

共享模式HTML

<div id="modal_container">
        <div id="shared_modal" class="modal fade show" data-backdrop="static" data-keyboard="false" role="dialog" [ngStyle]="{'display': _isopen ? 'block' : 'none','z-index':'1050' }">
            <div [ngClass] = "getModalDialogClass()">
                <div class="modal-content">
                    <div class="modal-header">
                        <ng-content select=[header]></ng-content>
                    </div>
                    <div class="modal-body">
                        <ng-content select=[body]></ng-content>
                    </div>
                    <div class="modal-footer">
                        <ng-content select=[footer]></ng-content>
                    </div>

                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show" *ngIf="_isopen" style="display: block; z-index: 1040;"></div>
        <div class="modal-backdrop fade show" *ngIf="!_isopen" style="display: none; z-index: 1040;"></div>
    </div>

共享模态分量

    import { Component, Input, OnChanges, OnInit, SimpleChange, SimpleChanges, DoCheck } from '@angular/core';
declare var $: any;
@Component({
    selector: 'shared-modal',
    templateUrl: './shared-modal.html'
})
export class SharedModal {
    _isopen = false;

    private _modalSize = 1; // 1:normal, 2: medium, 3: large
    public get modalSize() {
        return this._modalSize;
    }

    @Input()
    public set modalSize(value) {
        this._modalSize = value;
    }

    get open(): boolean {
        return this._isopen;
    }

    @Input()
    set open(val: boolean) {
        this._isopen = val;
    }
    getModalDialogClass() {
        if (this.modalSize == null || this.modalSize <= 1 || this.modalSize > 4) {
            return 'modal-dialog modal-sm';
        } else if (this.modalSize <= 2) {
            return 'modal-dialog modal-md';
        } else if (this.modalSize <= 3) {
            return 'modal-dialog modal-lg';
        }  else if (this.modalSize <= 4) {
            return 'modal-dialog modal-xl';
        }
    }
}

StrategyComponent.html

<div>

    <shared-modal [modalSize]="2" class="survey-edit" [open]="firmWindowOpened">
                <div style="width: 100%;" header>
                    <h4 class="modal-title">Firm - {{ManagerStrategyDetails.FirmName}}
                        <div style="text-align: right"><button aria-label="Dismiss" class="close"
                                style="margin-top: -48px" type="button" (click)="dismissFirmModal()">X</button></div>
                    </h4>
                </div>
                <div body>
                    <mgr-firm [EditMode]="editMode" [FirmId]='FirmId'></mgr-firm>

                </div>
                <div footer>
                </div>
            </shared-modal>
</div>          

StrategyComponent.ts

    public EditMode: boolean = false;


        openFirmModal() {
        this.editMode = false;
        this.firmWindowOpened = true;

    }

    dismissFirmModal() {
        this.firmWindowOpened = false;
        this.editMode = false;
    }

FirmComponent.html

<div class="card">
    <div class="card-header panel-heading" >
        <span class="left-label" style="font-size: 18px; font-weight: bold; ">Firm Details</span>
        <div class="pull-right"  style="padding-right:10px; display: inline-block; vertical-align:middle">
            <label style="text-align: center; vertical-align:middle" class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
            <input type="checkbox" [(ngModel)]="EditMode" class="hidden" />Edit Mode</label>
        </div>
    </div>


    <div class="card-body">

        <form [formGroup]="frmFirm" (ngSubmit)="saveFirm()">
            <div *ngIf="FirmDetails" class="card-body ">

                <div class="form-group row">
                    <label for="inputName" class="col-md-2 col-form-label modal-label ">Name</label>
                    <div class="col-md-9">
                        <div *ngIf="!EditMode">{{FirmDetails.FirmName}}</div>
                        <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control  form-control-sm"
                            formControlName="FirmName" />
                    </div>


                </div>
        </div>

firmComponent.ts

@Component({
    selector: 'mgr-firm',
    templateUrl: './firm.component.html'
})
export class FirmComponent implements OnInit {

    _editModel: boolean;
    get EditMode(): boolean {
        return this._editModel;
    }

    @Input('EditMode')
    set EditMode(value: boolean) {
        this._editModel = value;
    }


}

模态窗口编辑模式未在angular 7应用程序中重置

0 个答案: