Ich versuche einige Beispiele zu finden, wie ein modaler Bestätigungsdialog in Angular 2.0 erstellt wird. Ich habe das Bootstrap-Dialogfeld für Angular 1.0 verwendet und konnte im Web keine Beispiele für Angular 2.0 finden. Ich habe auch eckige 2.0-Dokumente ohne Glück überprüft.
Gibt es eine Möglichkeit, den Bootstrap-Dialog mit Angular 2.0 zu verwenden?
modal-dialog
angular
user636525
quelle
quelle
Antworten:
`
Um den Hintergrund zu zeigen , benötigen Sie so etwas wie dieses CSS:
Das Beispiel erlaubt jetzt mehrere Modalitäten gleichzeitig . (siehe die
onContainerClicked()
Methode).Für Bootstrap 4-CSS-Benutzer müssen Sie eine geringfügige Änderung vornehmen (da ein CSS-Klassenname von Bootstrap 3 aktualisiert wurde). Diese Zeile:
[ngClass]="{'in': visibleAnimate}"
sollte geändert werden in:[ngClass]="{'show': visibleAnimate}"
Um zu demonstrieren, hier ist ein Plunkr
quelle
div.modal-footer
und ändern Sie die,.app-modal-footer
um.modal-footer
dies zu beheben.Hier ist ein ziemlich anständiges Beispiel dafür, wie Sie das Bootstrap-Modal in einer Angular2-App auf GitHub verwenden können .
Das Wesentliche dabei ist, dass Sie die Bootstrap-HTML- und JQuery-Initialisierung in eine Komponente einbinden können. Ich habe eine wiederverwendbare
modal
Komponente erstellt, mit der Sie mithilfe einer Vorlagenvariablen ein Öffnen auslösen können.Sie müssen nur das npm-Paket installieren und das Modalmodul in Ihrem App-Modul registrieren:
quelle
Dies ist ein einfacher Ansatz, der nicht von jquery oder einer anderen Bibliothek außer Angular 2 abhängt. Die folgende Komponente (errorMessage.ts) kann als untergeordnete Ansicht einer anderen Komponente verwendet werden. Es ist einfach ein Bootstrap-Modal, das immer geöffnet oder angezeigt wird. Die Sichtbarkeit wird durch die ngIf-Anweisung bestimmt.
errorMessage.ts
errorMessage.html
Dies ist ein Beispiel für ein übergeordnetes Steuerelement (einige nicht relevante Codes wurden der Kürze halber weggelassen):
parent.ts
parent.html
quelle
class="modal fade show in danger"
Jetzt als NPM-Paket erhältlich
eckig-kundenspezifisch-modal
@ Stephen Paul Fortsetzung ...
ngOnDestroy
beim Beenden des Modals (ed) wird.Lazy Content Initialisierung
Warum?
In einigen Fällen möchten Sie möglicherweise nicht modal arbeiten, um den Status nach dem Schließen beizubehalten, sondern den ursprünglichen Zustand wiederherstellen.
Ursprüngliche modale Ausgabe
Wenn Sie den Inhalt direkt in die Ansicht übergeben, wird er tatsächlich initialisiert, noch bevor das Modal ihn erhält. Das Modal hat keine Möglichkeit, solche Inhalte zu töten, selbst wenn ein
*ngIf
Wrapper verwendet wird.Lösung
ng-template
.ng-template
wird erst gerendert, wenn Sie dazu aufgefordert werden.my-component.module.ts
my-component.ts
modal.component.ts
modal.component.html
Verweise
Ich muss sagen, dass es ohne die exzellente offizielle und Community-Dokumentation im Internet nicht möglich gewesen wäre. Es könnte einige von euch helfen zu verstehen besser , wie
ng-template
,*ngTemplateOutlet
und@ContentChild
Arbeit.https://angular.io/api/common/NgTemplateOutlet
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
https://medium.com/claritydesignsystem/ng-content -the-hidden-docs-96a29d70d11b
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in -angular-896b0c689f6e
Vollständige Copy-Paste-Lösung
modal.component.html
modal.component.ts
modal.module.ts
quelle
Ich benutze ngx-bootstrap für mein Projekt.
Die Demo finden Sie hier
Der Github ist hier
Wie benutzt man:
Installieren Sie ngx-bootstrap
In Ihr Modul importieren
quelle
Hier ist meine vollständige Implementierung der modalen Bootstrap Angular2-Komponente:
Ich gehe davon aus, dass Sie in Ihrer index.html-Hauptdatei (mit
<html>
und<body>
Tags) am Ende des<body>
Tags Folgendes haben:modal.component.ts:
modal.html:
Ein Beispiel für die Verwendung in der Client-Editor-Komponente: client-edit-component.ts:
client-edit.html:
Natuerlich
title
,showClose
,<mhead>
und<mfoot>
ar optionale Parameter / Tags.quelle
bindModal(modal) {this._modal=modal;}
können Sie dieViewChild
Annotation von Angular wie folgt verwenden :@ViewChild('editModal') _modal: Modal;
. Es übernimmt die Bindung für Sie hinter den Kulissen.Überprüfen Sie den ASUI-Dialog, der zur Laufzeit erstellt wird. Es ist nicht erforderlich, Logik zu verbergen und anzuzeigen. Simply Service erstellt zur Laufzeit eine Komponente mit AOT ASUI NPM
quelle
Wenn Sie versuchen, ng-window zu verwenden, können Entwickler auf einfache Weise mehrere Fenster in Anwendungen mit nur einer Seite öffnen und vollständig steuern. No Jquery, No Bootstrap.
Verfügbare Konfigration
quelle
Winkel 7 + NgBootstrap
Eine einfache Möglichkeit, das Modal von der Hauptkomponente zu öffnen und das Ergebnis an diese zurückzugeben. ist was ich wollte. Ich habe eine Schritt-für-Schritt-Anleitung erstellt, die das Erstellen eines neuen Projekts von Grund auf, das Installieren von ngbootstrap und das Erstellen von Modal umfasst. Sie können es entweder klonen oder der Anleitung folgen.
Hoffe das hilft neu bei Angular.!
https://github.com/wkaczurba/modal-demo
Einzelheiten:
modal-simple-Vorlage (modal-simple.component.html):
Die modal-simple.component.ts:
Demo davon (app.component.html) - einfache Möglichkeit, mit Rückgabeereignissen umzugehen:
app.component.ts - onModalClosed wird ausgeführt, sobald modal geschlossen wird:
Prost
quelle