Wie wechsle ich die bootstrap-4 modal mit Angular2 Komponente/ Typoskript

Ich bin nicht in der Lage ist umzuschalten ein bootstrap modal mit Typoskript. Ich bin mit dem default-bootstrap 4 Modal. Hier ist der code.

<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>

Und Hier ist eine Schaltfläche, die Bootstrap-4 zum Umschalten der Modal

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

Ich bin nicht mit diesem button in meiner Anwendung. Ich will zeigen, Modal durch eine Funktion in einer meiner Eckige 2-Komponente. Ich habe Zugriff auf das html-element mit dem folgenden code.

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

Nun brauche ich zur Aktivierung der modal zu zeigen, dass es mit einer Methode aufrufen. Ich war nicht dabei, eine Lösung zu finden, das zu tun. Ich habe versucht, Methoden wie .show() und andere Lösungen, aber keiner war.

Sie benötigen jQuery Abhängigkeit, wenn Sie nicht mit ng-bootstrap. v4-alpha.getbootstrap.com/components/modal/#via-javascript - Dokumentation ist ziemlich straight forward, wie modal öffnen.
Möglich, Duplikat der Wie zum ein - /ausblenden bootstrap modal von einer Komponente?

InformationsquelleAutor Virodh | 2017-03-20

können Sie @ViewChild() Dekorateur, um den Verweis modal-in-Komponente und verwenden Sie es dann mit jQuery zu nennen .modal() Methode öffnen Objektmodell von innerhalb der Funktion.

deklarieren Sie alle lokalen Variablen in der Vorlage, für die ex -#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>

verwenden Sie es in Ihrer Komponente mit @ViewChild() Dekorateur.

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

finden Sie Schritte zu jQuery in Ihr Projekt hier.

Im Falle dass, wenn .modal() - Methode bietet Ihnen Fehler sagen .modal() ist keine Funktion, nur deklarieren Sie eine jQuery variable in die Komponente Datei wie folgt.

declare var jQuery:any;

@Component({
 ...
})
export class YourComponent{
 ...
}

"Im Falle dass, wenn .modal () - Methode gibt Ihnen Fehler sagen .modal() ist keine Funktion, nur erklären, sondern ein jQuery-variable in die Komponente Datei wie folgt." - nicht funktionieren. Scheint, wie zu installieren, müssen zusätzliche jQuery-plugins, um diese Methode zur Verfügung.
Ja, installieren, jQuery-plugins und fügen Sie Sie in Eckige-cli.json wie diese "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bxslider/dist/jquery.bxslider.min.js", "../node_modules/owl-carousel/owl-carousel/owl.carousel.js" ],

InformationsquelleAutor HirenParekh

7

Ich würde vorschlagen, mit einer Spezialbibliothek, die eine nahtlose Bootstrap-4-integration für Angular 2+. ng-bootstrap hat ausgezeichnete modal-Implementierung, in denen das öffnen eines modalen mit Inhalten aus einer Komponente hinausläuft:
```
 @Component({
  selector: 'ngbd-modal-component',
  templateUrl: './modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(MyContent);
  }
}
```
Können Sie Lesen Sie die komplette Dokumentation hier: https://ng-bootstrap.github.io/#/components/modal und überprüfen Sie ein live-Beispiel mit diesem plunk: http://plnkr.co/edit/vAsduJNgB0x6fWPQudQD?p=preview

InformationsquelleAutor pkozlowski.opensource

3 Schritt zum Umschalten(ein-oder ausblenden) bootstrap-modal:

Hinzufügen ViewChild, um Zugang zu den modalen wie unten code:

Tipp: Mitteilung an die #modal im code in der ersten Zeile:

<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>

Schaltfläche hinzufügen für das zeigen von modal in Ihre html:

Tipp: Mitteilung an die (click)="showModal()":
```
<button type="button" class="btn btn-primary" (click)="showModal()">Show Modal</button>
```

Innerhalb Ihrer Komponente, legen diese codes:

Tipp: Beachten Sie zu showModal Funktion und Zugriff auf jquery Zeichen innen
Komponente:

//jQuery Sign $
declare let $: any;

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

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

InformationsquelleAutor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.