web-dev-qa-db-ja.com

angular 5-モーダルディレクティブ

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プロジェクト、使用せずにangular方法で実行しようとしていますjQuery。どんな助けでもありがたいです。

javascriptangularangularjs-directiveangular5
2
Unknown User

モーダルの場合Angular TypeScriptを使用すると、ブートストラップを使用できます。モーダルの例は、このリンクにあります。クリック ここ ！

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>

それでおしまい！

6
Saurav

これはbootstrap 4.1.Xおよびangular 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');
  }
}
0
Prakash Khadka