Richtiger Weg, um ein DOM-Element zu bekommen

Question

Ich habe eine einzigartige Situation vor sich. Ich benutze Angular 2 mit Ionic 2, um eine Telefon-App zu erstellen. Ich muss das DOM-Element einer der Komponenten von Ionic 2 dazu bringen, etwas HTML in sein innerHTML-Attribut einzufügen.

Wie mache ich das in Angular 2? Ich habe keinen Zugang zu dieser Komponente, da es eine der Komponenten ist, die mit Ionic geliefert wird. Um genauer zu sein, es ist die Komponente und ich initialisiere es in einer Typescript-Funktion, aber es gibt keine Möglichkeit für mich, das DOM-Element zu erhalten, das erstellt wird.

Ich könnte JQuery hinzufügen und einfach das DOM-Element, das ich für die Komponente benötige, bekommen, aber ich habe gelesen, dass einschließlich JQuery in Ihrer Angular 2-App eine schlechte Übung ist.

Ich habe mit ViewChild nachgeschlagen, aber das funktioniert nur in einer Komponente, die Sie gemacht haben. Da dies eine Komponente ist, die mit Ionic 2 kommt und ich die Komponente nicht erstellt habe, kann ich ViewChild nicht verwenden, um seine ElementRef zu erhalten.

EDIT: Ich habe vergessen zu sagen, dass, wenn das Ionic 2 das Element einfügt es als Kind des Körpers eingefügt wird. Es ist also außerhalb des Komponentenbaums, der von meinen Komponenten erzeugt wird, und ich kann nicht so etwas wie ContentChild verwenden, um Nachkommen zu suchen, weil es kein Nachkomme ist.

Also wie bekomme ich das DOM-Element für diese Komponente nur mit Angular 2?

Answer 1

So löste ich mein eigenes Problem. Letzte Nacht dachte ich darüber nach, wie man in Angular 2 niemals JQuery oder das Objekt document verwenden muss, da jede Komponente, die Sie erstellen, Zugriff auf ihr eigenes DOM-Element sowie auf alle untergeordneten Elemente hat.

Das Problem ist, dass wenn ein Toast programmatisch in Typescript erstellt wird, wird es nicht in einer Ihrer eigenen Komponenten eingefügt, sondern in einem anderen Zweig des Komponentenbaums von Ionic erstellt. Und da liegt das Problem, Sie haben keinen Zugang zu diesem separaten Zweig (oder so dachte ich).

Dann dachte ich mir, wenn ich ein Framework entwerfe, müssten meine Benutzer gelegentlich Zugang zu diesem Baum haben, oder zumindest zu den einzelnen Elementen, die sie darin erstellen. Also ging ich in die Ionic 2 API und schaute auf . Dort war keine Funktion definiert oder irgendetwas, das etwas hatte, das die ElementRef zurückgeben würde.

Ich dachte immer, dass es da sein muss. Ionic würde seine Benutzer nicht in der Kälte draußen lassen. Also ging ich und schaute auf die source code für auf Github. Wenn Sie auf diesen Link klicken, werden Sie feststellen, dass die Klasse Toast eine weitere Klasse namens ViewController erweitert. Und die Klasse ViewController hat eine öffentliche Funktion namens pageRef(). Nun, das wird die ElementRef der Komponente zurückgeben.

Da die Toast Klasse erweitert ViewController ist, hat Toast Zugriff auf pageRef() als auch. Um die ElementRef des Toasts zu bekommen, musste ich nur toast.pageRef() schreiben.

Dann mein eigenes Problem zu lösen, alles, was ich tun musste, war die folgende Zeile schreiben:

toast.pageRef().nativeElement.getElementsByClassName('toast-message')[0].innerHTML = message; 

Keine Notwendigkeit für JQuery oder document Objekt zu verwenden.

Jedes Element in Ionic, das programmgesteuert erstellt und in die Baumstruktur eingefügt wird, um den eigenen Komponentenbaum zu erweitern, erweitert die ViewController Klasse. Für Warnungen, Popups und viele andere Komponenten können Sie auch die pageRef() Funktion verwenden.

Answer 2

Wie wäre es mit einfachem altem Javascript? Ich weiß, es ist nicht das Schönste, aber es ist eine Lösung, und Sie müssen keine externe Bibliothek importieren (jquery). Nur declare var document oben auf Ihrem Dokument und dann: document.getElementsByTagName("ion-toast")[0].innerHTML wenn nur eins, natürlich. Achten Sie außerdem darauf, dass beim Entfernen des Toast-Objekts das Element aus dem DOM entfernt wird und Sie auf diese Weise nicht mehr darauf zugreifen können. Es ist auch nicht im DOM zugänglich, wenn es nicht im Bildschirm ist.

Ich hoffe, dies hilft Ihnen.