Winkel-5 - modal-Richtlinie

Dies ist mein erstes mal auf Eckig mit Typoskript. Ich habe wirklich hart versucht, diese zu erstellen modal-Richtlinie, inspiriert von ngMorph.

Diese funktionieren wie erwartet, aber ich habe über eine sehr komisches Problem. Wenn ich auf die Schaltfläche, öffnet sich die modal box, es funktioniert genauso gut, und ich in der Nähe der modal-box ist, schließt es. Wenn ich versuche, öffnen Sie die gleiche modal-box wieder ein und versuchen Sie zu schließen, nicht es zu schließen. Und es nicht werfen nicht alle Fehler als gut.

Nach dem Debuggen habe ich festgestellt, dass modal-active Klasse in der modal-button ist nicht immer entfernt.

HTML

<div class="modal-button edit-sample-modal" [appModal] data-modal="edit-sample-modal">Open Modal</div>

<div class="custom-modal" id="edit-sample-modal">
    <a href="javascript:void(0)" class="text-default">
        <i class="fa fa-close fa-fw close-modal"></i>
    </a>
</div>

Hier ist mein code für den modal

import { Directive, ElementRef, AfterViewChecked, Input, HostListener } from '@angular/core';

@Directive({
    selector: '[appModal]'
})
export class ModalDirective implements AfterViewChecked {

    @Input()
    appModal: string;

    constructor(
        private element: ElementRef
    ) { }

    ngAfterViewChecked() {
        //function to go here
        this.initModalBox(this.element.nativeElement, this.element.nativeElement.getAttribute('data-modal'));
    }

    @HostListener('click') onclick() {
        this.initModalBox(this.element.nativeElement, this.element.nativeElement.getAttribute('data-modal'));

        const modalElement = document.getElementById(this.element.nativeElement.getAttribute('data-modal'));

        this.element.nativeElement.classList.toggle('modal-active');
        modalElement.classList.toggle('modal-open');
    }

    initModalBox(button: HTMLElement, modalDialog: string) {
        const trigger: HTMLElement = button;
        const triggerPos = trigger.getBoundingClientRect();

        const modalElement = document.getElementById(modalDialog);

        modalElement.style.top = `${triggerPos.top}px`;
        modalElement.style.left = `${triggerPos.left}px`;
        modalElement.style.height = `${triggerPos.height}px`;
        modalElement.style.width = `${triggerPos.width}px`;

        modalElement.style.position = 'fixed';

        const closeElement = modalElement.getElementsByClassName('close-modal')[0];

        closeElement.addEventListener('click', function () {
            modalElement.classList.toggle('modal-open');
            //this.element.nativeElement.classList.toggle('modal-active');
            document.getElementsByClassName(modalElement.getAttribute('id'))[0].classList.toggle('modal-active');
        });
    }
}

Ich weiß der code ist nicht perfekt, ich bin nur zu lernen, die Dinge und ich habe diesen so weit. Ich wurde auch gefragt, der mit jQuery-aber ich will nicht, es zu benutzen Winkel-Projekt, bin ich versucht zu machen, tun es die eckige Form ohne die Verwendung von jQuery. Jede Hilfe wird geschätzt.

InformationsquelleAutor Unknown User | 2017-12-11