web-dev-qa-db-ja.com

切り替え方法bootstrap Angular2 Component / Typescriptを使用した4モーダル

TypeScriptを使用してbootstrapモーダルを切り替えることができません。デフォルトのbootstrap 4モーダルを使用しています。ここにコードがあります。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

そして、ここにBootstrap 4がモーダルを切り替えるために提供するボタンがあります

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

アプリケーションでこのボタンを使用していません。 Angular 2コンポーネントの1つにある関数を介してModalを表示したいと思います。次のコードでhtml要素にアクセスしました。

  ngOnInit() {
    this.modalElement = document.getElementById('myModal');
  }

次に、モーダルをアクティブにして、メソッド呼び出しを使用してモーダルを表示する必要があります。私はそれをするための解決策を見つけようとしていませんでした。 .show（）やその他のソリューションのようなメソッドを試しましたが、どれも機能しませんでした。

angulartypescript2.0twitter-bootstrap-4
7
Virodh

@ViewChild()デコレーターを使用してコンポーネント内のモーダルの参照を取得し、それをjQueryで使用して.modal()メソッドを呼び出し、関数内からモデルを開くことができます。

テンプレートでローカル変数を宣言します（例：_#myModal_）。

_<div #myModal class="modal fade" id="myModal" tabindex="-1" role="dialog" 
  aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
_

@ViewChild()デコレータを使用してコンポーネントで使用します。

_import { ViewChild } from '@angular/core';
import { ElementRef } from '@angular/core';
@Component({
  ...
})
export class YourComponent {
  @ViewChild('myModal') myModal:ElementRef;

   yourFunction(){
     //open modal using jQuery
     jQuery(this.myModal.nativeElement).modal('show'); 
   }
}
_

プロジェクトにjQueryを含めるための手順を見つけることができます こちら

.modal()メソッドで.modal（）が関数ではないというエラーが発生した場合は、次のようにコンポーネントファイルでjQuery変数を宣言するだけです。

_declare var jQuery:any;

@Component({
 ...
})
export class YourComponent{
 ...
}
_
14
HirenParekh

Bootstrap 2+にシームレスなAngular 4統合を提供する専用ライブラリを使用することをお勧めします。 ng-bootstrap は、コンポーネントのコンテンツを含むモーダルを開くと、次のように要約される優れたモーダル実装を備えています。

 @Component({
  selector: 'ngbd-modal-component',
  templateUrl: './modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(MyContent);
  }
}

ここで完全なドキュメントを読むことができます： https://ng-bootstrap.github.io/#/components/modal とこのplunkでライブの例を確認してください： http：// plnkr。 co/edit/vAsduJNgB0x6fWPQudQD？p = preview

7
pkozlowski.opensource

ステップトグル（表示または非表示）bootstrap modal：

  1. ViewChildを追加以下のコードのようなモーダルにアクセスします。

    ヒント：最初の行のコードの＃modalに注意してください。

    <div class="modal fade" #modal>
    <div class="modal-dialog">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <header class="font-12 bold">Modal Header</header>
                </div>
                <div class="modal-body">
                    Your Content ...
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">close</button>
                </div>
            </form>
        </div>
    </div>
</div>

  2. ボタンを追加 HTMLでモーダルを表示する場合：

    ヒント：（click "showModal（）"）==に注意してください：

    <button type="button" class="btn btn-primary" (click)="showModal()">Show Modal</button>

  3. コンポーネント内に、次のコードを配置します。

    ヒント：コンポーネント内のshowModal functionおよびjquery記号へのアクセスに注意してください。

    // jQuery Sign $
declare let $: any;

@Component({
    ...
})
export class YourComponent {
    @ViewChild('modal') modal:ElementRef;

    showModal(){
        // Show modal with jquery
        $(this.modal.nativeElement).modal('show'); 
    }
}
5
user2577907