Javascript angular 5 - 模态指令

angular 5 - modal directive

提问by Unknown User

This is my first time on Angular using typescript. I've been really trying hard to create this modal directive, inspired from ngMorph.

这是我第一次使用打字稿在 Angular 上。我一直在努力创建这个模态指令，灵感来自ngMorph。

This are working fine as expected but I've run across a very weird issue. When I click on the button to open the modal box, it works just as fine and I close the modal box, it closes. When I try to open the same modal box again and try to close, it doesn't close. And it doesn't throw any error as well.

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

After debugging, I found that modal-activeclass in the modal-buttonis not getting removed.

调试后，我发现中的modal-active类modal-button没有被删除。

HTML

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>

Here's my code for the 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');
        });
    }
}

I do know the code is not perfect, I'm just learning things and I've come up with this so far. I was even wondering of using jQuery but I don't want to use it Angular project, I'm trying to make do it the angular way without using jQuery. Any help will be appreciated.

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

回答by Saurav

For modal in Angular with typescript one can go with bootstrap. You can find modal example in this link.. Click here!

对于带有打字稿的 Angular 模态，可以使用引导程序。您可以在此链接中找到模态示例.. 单击此处！

1: Import ModalModule to your module as below:

1：将 ModalModule 导入您的模块，如下所示：

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

2:Add below line into your .html file

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>

Thats it!

就是这样！

回答by Prakash Khadka

This is for bootstrap 4.1.X and angular 6.0.X

这是用于 bootstrap 4.1.X 和 angular 6.0.X

modal.html

模态.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

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