角度5 - 模态指令

Posted 2021-04-05

这是我第一次使用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的情况下以角度方式进行。任何帮助将不胜感激。

答案

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

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>

而已！

另一答案

这是针对bootstrap 4.1.X和角度6.0.X

modal.html

<!-- MODAL TRIGGER -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" appModal>Launch Modal</button>

<!-- MODAL -->

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button class="close" data-dismiss="modal" appModal>&times;</button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde veniam harum magnam molestias dignissimos omnis
        architecto, quod, obcaecati dolorum debitis dolore porro qui, iusto quo accusantium voluptates pariatur illo.
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal" appModal>Close</button>
      </div>
    </div>
  </div>
</div>

appModal.directive.ts

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

@Directive({
  selector: '[appModal]'
})
export class AppModalDirective {

constructor() { }

  @HostListener('click') modalOpen(){
    document.getElementById('myModal').classList.toggle('d-block');
  }
}