角度5 - 模态指令

Question

这是我第一次使用typescript在Angular上.我一直在努力创建这个模态指令,灵感来自ngMorph.

这正如预期的那样正常,但我遇到了一个非常奇怪的问题.当我点击按钮打开模态框时,它工作得很好,我关闭模态框,它关闭.当我尝试再次打开相同的模态框并尝试关闭时,它不会关闭.并且它也不会抛出任何错误.

调试后,我发现modal-active该类中的类modal-button没有被删除.

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>

这是我的模态代码

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');
        });
    }
}

我知道代码并不完美,我只是在学习东西,到目前为止我已经想出了这个.我甚至想知道使用jQuery但我不想使用它的Angular项目,我试图在不使用jQuery的情况下以角度方式进行.任何帮助将不胜感激.

Answer 1

对于带有打字稿的Angular中的模态,可以使用bootstrap.你可以在这个链接中找到模态示例..点击这里!

1:将ModalModule导入模块,如下所示:

import { ModalModule } from 'ngx-bootstrap';
@NgModule({
imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

2:在.html文件中添加以下行

<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is static modal, backdrop click will not close it.
        Click <b>&times;</b> to close modal.
      </div>
    </div>
  </div>
</div>

而已!