MDL und Angular2 2.0.0-rc.1

Question

Ich habe Schwierigkeiten, Material Design Lite (MDL) zu bekommen, um mit der Version 2.0.0-rc.1 von Angular2 zu arbeiten, speziell mit dynamischen Inhalten.

Ich habe zwei Komponenten, eine ist die Hauptanwendung Komponente, die die zweite enthält. Ich kann HTML in die Vorlage der Hauptkomponente einfügen, MDL-Klassen verwenden, die Komponente implement OnInit haben und von dort aus componentHandler.upgradeDom() aufrufen. Der gesamte bisher hinzugefügte HTML-Code wird jetzt von MDL registriert.

Wenn ich jedoch die zweite Komponente verwende eine service und dynamisch das Ergebnis in seine Vorlage hinzufügen, dann wird dieses Zeug nicht von der ersten componentHandler.upgradeDom() registriert. Ich verstehe nicht, warum das Aufrufen von componentHandler.upgradeDom() aus der zweiten Komponente, nachdem es den dynamischen Inhalt hinzugefügt hat, nicht funktioniert. Ich dachte es sollte. Verwendet es eine andere componentHandler oder etwas?

Eine andere Idee wäre, die zweite Komponente irgendwie eine Funktion der ersten Komponente aufrufen zu lassen, um es zu verwenden componentHandler und das DOM von dort zu aktualisieren, aber ich weiß nicht, wie man das macht.

Zu Testzwecken habe ich eine native Javascript-Datei hinzugefügt, die das selbe aufruft und eine Schaltfläche auslöst - das funktioniert.

Ich habe mehrere Anweisungen zu StackOverflow gefunden, die angeblich alle neuen HTML-Dateien automatisch registrieren lassen, aber keine funktionieren für mich. Kann jemand das für diese Version von Angular2 tun?

Answer 1

Leider hat die Antwort von UtherSide mich auch nicht funktioniert.

Mein Fehler war sehr spezifisch für mein Projekt. Ich habe dynamischen Inhalt hinzugefügt und componentHandler.upgradeDom(); erzählt aber es funktionierte nicht für Inhalt, der nicht sichtbar war in diesem Moment aufgrund der CSS-Einstellung auf opacity: 0; max-height: 0. Dies ist korrekt für mein Projekt, das diese Einstellungen bei einem Klick ändert, um sie für den Benutzer sichtbar zu machen. Offenbar wurde dies deshalb für die upgradeDom() Funktion ignoriert.

Ich habe die gleiche Funktion an anderer Stelle in meinem Code hinzugefügt - grundsätzlich, wenn ich den Inhalt lade ich einen Booleschen Wert auf wahr, um anzuzeigen, dass es sich geändert hat. Wenn der Benutzer einen solchen versteckten Teil sichtbar macht und dieser Boolesche Wert wahr ist, wird die Funktion aufgerufen und der Boolean-Wert auf false gesetzt, so dass er nicht jedes Mal auftritt.

Vielleicht ist jemand anders an der gleichen Stelle. Es ist sicherlich nicht die beste Lösung, um nach diesen Dingen zu suchen und was nicht, aber hey, es funktioniert.

bearbeiten Ich bin nicht 100% sicher, es war, weil der Inhalt in Frage versteckt war, eigentlich vielleicht war ich nur die Funktion zu früh aufrufen. Vielleicht wollen Sie das auch überprüfen.

Answer 2

I der Richtlinie bin mit hier componentHandler.upgradeAllRegistered(); nennen: https://stackoverflow.com/a/35451821/1341825

Um CSS zu bekommen Komponente arbeiten, können Sie auch encapsulation:ViewEncapsulation.None auf Ihrer Komponente festlegen müssen (do import {Component, ViewEncapsulation} from '@angular/core';)

können Sie Auch müssen Sie eine ElementRef in die Komponente injizieren und dann explizit componentHandler.upgradeElement darauf aufrufen. (Das hat bei mir nicht funktioniert, aber ich sah es in einigen Beispielen zu arbeiten.) Zur Kasse:

• https://gist.github.com/tbassetto/fa36518660cfcc7e0b62
• https://stackoverflow.com/a/35217588/1341825.