Angular2 - MaterializeCSS: Modale Dialoge nicht öffnen
Ich bin mit Angular2 mit materializecss.
Im moment bin ich versucht zu erstellen, modale Dialoge, die sich öffnen, auf den button klicken. Es gibt auch ein Beispiel in den docs https://www.npmjs.com/package/angular2-materialize.
Bin ich auch mit einem materilize-wählen Sie die funktioniert auch einwandfrei, ich denke also, die installation, Importe etc. richtig sind.
Das problem ist, wenn ich auf die modal-trigger des Routers behebt die neue Route "localhost:4200/#modal1" und ich bin die Weiterleitung auf meine Startseite.
Ich habe auch versucht zu ersetzen, href mit data-target="modal1"
aber das hat nicht funktioniert entweder.
Kann ich das irgendwie deaktivieren der Hash-Links für die Router? Meine anderen Strecken sind ohne hashes.
Hier ist das Beispiel von npm-docs. Kopiert habe ich das Teil 1:1.
<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
Jede Hilfe/Hinweise dankbar!
Edit: ich habe die Anker, um eine Funktion aufzurufen, klicken Sie auf
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" (click)="openModal()>Modal</a>
auslöst,
$('#modal1').openModal()
Aber jetzt bekomme ich eine Fehlermeldung:
j.Geschwindigkeit keine Funktion
Edit 2:
Habe es zum öffnen der modals von der Verwendung von jQuery anstelle von $. Ich bekomme immer noch den Fehler, und die Anwendung hängen geblieben ist nach dem öffnen der modal.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe eine Lösung gefunden. War ziemlich frustrierend, um es zu erhalten, aber hier ist es:
Ich alles neu installiert, dass war im Zusammenhang zu materialisieren, + Winkel-cli, wird angular2-materialisieren, materialisieren,-css -, jquery-und hammerjs (die nicht manuell installiert werden müssen).
Dann folgte ich der Anweisung von npmjs und entfernt den Teil der Einfuhren material-css-in-app.- Modul.ts.
Und nach, dass alles in Ordnung ist. Keine Notwendigkeit zu ändern, die webpack-Einstellungen in angular2-materialisieren-Paket oder etwas ähnliches. Meine Versionen sind:
Ich hoffe, dass ich anderen Menschen etwas frustrierenden Stunden, die ich hatte, mit, dass.
Können Sie versuchen, zu verwenden, öffnen\schließen Sie programmgesteuert:
sehen http://materializecss.com/modals.html, wenn der doc sagt:
Gesicht gleiche problem und obige Lösungen nicht helfen, mich auf dieser, so schreiben Sie eine neue Antwort
Fügen Sie einfach
$('.modal').modal();
in Ihre Komponenten-Konstruktor.Könnte ich zu spät sein für dieses, aber Sie setzen diese beiden Attribute in den modalen trigger
<a>
anstatt der modalen<div>
selbst.Ich habe auch genau die gleichen Fehler wie bei OP, aber nach dem Lesen der angular2-materialisieren Seite sorgfältig durch, korrigierte ich meinen code wie unten erwähnt.
Stattdessen
Setzen Sie wie:
Drei Punkte hier zu beachten:
<a>
d.h. der triggermaterialize="leanModal"
ist esmaterialize="modal"
im modalimport "materialize-css";
in meinem Fall