web-dev-qa-db-ja.com

クロスクリックでng-bootstrapモーダルが閉じない

ng-bootstrapモーダルポップアップを使用していますが、十字ボタンをクリックしても閉じません。

これは <a>ポップアップをトリガーするタグ-

<div class="actions padding-zero">
    <a href="javascript:void(0);" (click)="openFilter()" class="icon configure-columns-icon">
        <span class="control-label">Configure Columns</span>
    </a>
</div>

モーダル-

<ng-template #filterForm let-modal>
    <div class="TitlePanel">
    Configure Columns                       
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    X
    </button>
    </div>
    <div class="modal-body">
      Body
    </div>                   
</ng-template>

component.tsファイル-

export class NgbdModalContent {
    @Input() name;
    constructor(public activeModal: NgbActiveModal) { }
}


@Component({
    selector: 'app-modals',
    templateUrl: './modals.component.html',
    styleUrls: ['./modals.component.scss'],
    encapsulation: ViewEncapsulation.None,
})

export class ModalsComponent {

    closeResult: string;

    constructor(private modalService: NgbModal) { }

    // Open default modal
    open(content) {
        this.modalService.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
    }

    // This function is used in open
    private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
            return 'by pressing ESC';
        } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
            return 'by clicking on a backdrop';
        } else {
            return `with: ${reason}`;
        }
    }

    // Open modal with dark section
    openModal(customContent) {
        this.modalService.open(customContent, { windowClass: 'dark-modal' });
    }

    // Open content with dark section
    openContent() {
        const modalRef = this.modalService.open(NgbdModalContent);
        modalRef.componentInstance.name = 'World';
    }
}

また、閉じるボタンをクリックすると、コンソールにこのエラーが表示されます-「未定義のプロパティ 'dismiss'を読み取れません」

enter image description here

angularbootstrap-4ng-bootstrap
4
Sagar Raj

いくつかの研究とこれらの変更を行った後、それはうまくいきました。

<ng-template #filterForm let-d="dismiss">
    <div class="TitlePanel">
        Configure Columns                       
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        X
        </button>
    </div>
    <div class="modal-body">
       Body
    </div>                   
</ng-template>
12
Sagar Raj

modalを使用していますが、activeModalを注入しています。 HTMLコードを次のように更新します。

<ng-template #filterForm let-modal>
    <div class="TitlePanel">
    Configure Columns                       
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    X
    </button>
    </div>
    <div class="modal-body">
      Body
    </div>                   
</ng-template>
1
Gobli
(click)="modal.dismiss('Cross click')"

に変更する必要があります

(click)="activeModal.dismiss('Cross click')"

あなたが与えているので

public activeModal: NgbActiveModal
1
Franklin Pious
[solution by   using modal reference][1]

[1]： Angular 2 ng-bootstrap close Modalそれは機能します

0
Rinold