web-dev-qa-db-ja.com

Angular 2-デフォルトの開閉bootstrapモーダル

angular2-bootstrap または ng2-bs3-modal を使用したくありません。質問/回答で提案されているように Angular 2 Bootstrap Modal および Angular 2.0およびモーダルダイアログ

今。 bootstrapモーダルの開閉を知っています。

  • 表示はdisplay: none;とdisplay: block;の間で切り替わります
  • 属性は、divでaria-hidden="true"とaria-hidden="falseの間で切り替わります

したがって、当然aria-hiddenのように[aria-hidden]="true"属性にバインドすると、それを操作できると思いました。残念ながら、divの既知のプロパティではないため、aria-hiddenにバインドできません。 （注、attr.aria-hiddenは存在しません）

この質問に示されているように、$('#myModal').modal()を指定したJQueryでこれが可能であることはわかっています jQueryを使用してBootstrapモーダルウィンドウを開く方法

だから私の質問は、JQueryのmodal()と同じことを行うTypeScript機能がありますか、または関数/変数をaria-hiddenにバインドする方法がありますか？

私の現在のhtml：

<div id="createAccountModal" class="modal fade customForm" role="dialog" [aria-hidden]="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create account</h4>
            </div>
            <div class="modal-body">
               <p>Lorem ipsum</P>
            </div>
            <div class="modal-footer align-left">
                My custom footer
            </div>
        </div>
    </div>
</div
angulartypescriptbootstrap-modal
18
Ivar Reukers

次のようなものを試して、myModal.htmlを作成してください：

<div class="modal-backdrop fade in" [style.display]="showModal ? 'block' : 'none'"></div>
  <div class="modal" tabindex="-1" role="dialog" style="display: block" [style.display]="showModal ? 'block' : 'none'">
     <div class="modal-dialog">
        <div class="modal-popup">
          <div class="popup-title">
            <span>{{title}} </span>
            <i class="icon-cancel fr" data-dismiss="modal" aria-label="Close" (click)="cancelAction()"></i>
            <p *ngIf="subTitle">{{subTitle}}</p>
          </div>
        <ng-content></ng-content>
      </div>
  </div>
</div>

次に、myModal.component.tsを作成します。

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

const template: string = require('./myModal.html');

@Component({
   selector: 'modal',
   template
})

export class Modal implements OnInit {
  @Input('show-modal') showModal: boolean;
  @Input('title') title: string;
  @Input('sub-title') subTitle: string;
  @Input('cancel-label') cancelLabel: string;
  @Input('positive-label') positiveLabel: string;

  @Output('closed') closeEmitter: EventEmitter < ModalResult > = new EventEmitter < ModalResult > ();
  @Output('loaded') loadedEmitter: EventEmitter < Modal > = new EventEmitter < Modal > ();
  @Output() positiveLabelAction = new EventEmitter();

  constructor() {}

  ngOnInit() {
    this.loadedEmitter.next(this);
  }

  show() {
    this.showModal = true;
  }

  hide() {
    this.showModal = false;
    this.closeEmitter.next({
      action: ModalAction.POSITIVE
    });
  }

  positiveAction() {
    this.positiveLabelAction.next(this);
    return false;
  }

  cancelAction() {
    this.showModal = false;
    this.closeEmitter.next({
      action: ModalAction.CANCEL
    });
    return false;
  }
}

export enum ModalAction { POSITIVE, CANCEL }

export interface ModalResult {
  action: ModalAction;
}

次に、このためにmoduleを作成すると、どこでも使用でき、次のようにどこでも使用できます。

<modal #deleteUserModal id="deleteUser"
   [show-modal]="isModalOpen"
   [title]="'Delete'"
   >
  <div class="popup-content">
    <p>Are you sure you want to delete the user permanently?</p>
  </div>
  <div class="popup-footer">
    <button class="btn cancel"  aria-label="Close" (click)="deleteUserModal.hide()">
        Cancel
    </button>
    <button type="button" class="btn btn-primary" (click)="deleteSelectedUser(deleteUserModal)" aria-label="Close">
        Delete
    </button>
   </div>
 </modal>

これも強化できます:)

16
Avnesh Shakya

モーダルにキャンセルボタンがある場合（そうでない場合は、非表示の閉じるボタンを作成します）。このボタンのクリックイベントをシミュレートして、フォームを閉じることができます。コンポーネントにViewChildを追加します

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

閉じるボタンに＃fileInputを追加します

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button>

プログラムでモーダルを閉じたい場合は、閉じるボタンでクリックイベントをトリガーします。

this.fileInput.nativeElement.click();

開くには、同じアイデアを使用できます

8
Fernando Siqueira

私はこのようにしましたが、それは私にとって完璧に機能します。

var element = document.getElementById（ "CloseButton"）any;

element.click（）; CloseButtonはbootstrap閉じるボタンです

5
Kindlebit Net

OK、aria-hiddenにバインドする必要はありませんが、これは可能だと思います。

現在の回答は Angular 2.0とModal Dialog から来ました（ただし、9回のアップ投票のみの回答）

追加中

<div id="createAccountModal" class="modal fade customForm" role="dialog" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">

これを私のコードに追加し、ボタンに(click)ハンドラーを持たせることで、visibleとvisibleAnimateを切り替えることができます。

1
Ivar Reukers

ng-windowを使用してみてください。開発者は、単一のページアプリケーションで複数のウィンドウを開き、Jqueryなし、ブートストラップなしの簡単な方法で完全に制御できます。

enter image description here

利用可能な構成

  • ウィンドウを最大化
  • ウィンドウを最小化
  • カスタムサイズ、
  • カスタムポジション
  • ウィンドウはドラッグ可能です
  • 親ウィンドウをブロックするかどうか
  • ウィンドウを中央に配置するかどうか
  • Chieldウィンドウに値を渡す
  • Chieldウィンドウから親ウィンドウに値を渡す
  • 親ウィンドウで閉じているchieldウィンドウを聞く
  • カスタムリスナーでサイズ変更イベントをリッスンする
  • 最大サイズで開くかどうか
  • ウィンドウのサイズ変更を有効または無効にする
  • 最大化の有効化と無効化
  • 最小化の有効化と無効化
0
Bahgat Mashaly