angular5 - モーダルディレクティブ

Question

これは、まずはtypescriptを使用してAngularで初めてです。私は実際にngMorphからインスパイアされたこのモーダルディレクティブを作成しようと努力してきました。

これは正常に動作していますが、非常に奇妙な問題が発生しています。ボタンをクリックしてモーダルボックスを開くと、それは正常に機能し、モーダルボックスを閉じると閉じます。同じモーダルボックスを再度開いて閉じようとすると、閉じません。そして、それはどんなエラーも投げません。

デバッグ後、modal-buttonのmodal-activeクラスが削除されないことが判明しました。

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

角型のタイプスクリプトでは、ブートストラップを使用できます。 このリンクでモーダルの例が見つかります。 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> 

を追加！