Angular 2, ändern Sie die Ansicht einer anderen Komponente von einer nicht verwandten Komponente

8

Ich kann den Wert der Variablen einer Komponente aus einer anderen Komponente ändern, wie in diesem Beispiel console.log() angezeigt wird.

Mein Problem ist, dass die Ansicht der zweiten Komponente trotz der Variablenänderung nicht aktualisiert wird.

Beispiel:

first.component.ts

%Vor%

zweite.component.ts

%Vor%

Beide Komponenten sind vollständig nicht verwandt aus verschiedenen Zweigen der DOM-Struktur.

Ich habe auch versucht, dass die erste Komponente ein Ereignis ausstrahlt und die zweite Komponente dasselbe mit dem gleichen Ergebnis abonniert. Die Variable ändert sich aber die Ansicht wird nicht aktualisiert.

Nach Günters Vorschlag (danke) habe ich mit der nächsten Lösung erfolglos versucht. Selbst das console.log funktioniert nicht.

first.component.ts

%Vor%

update.service.ts

%Vor%

zweite.component.ts

%Vor%

Gelöst

Schließlich funktionierte die von Günter vorgeschlagene Lösung nach dem Hinzufügen von UpdateService als provider in @NgModule von app.module.ts

    
Manel 27.09.2016, 10:52
quelle

2 Antworten

4

update

Ich bin mir ziemlich sicher, dass die Ursache Ihres Problems darin besteht, dass Sie

erwarten %Vor%

etwas tun, was es überhaupt nicht tut.

Mit diesem Konstruktor erhalten Sie eine SecondComponent Instanz, die nicht mit der auf Ihrer Seite gezeigten Komponente verknüpft ist. Aus diesem Grund wird Ihre Ansicht nicht aktualisiert. Sie haben die sichtbare Komponente nicht aktualisiert, sondern eine völlig unabhängige Klasse.

Sie müssen eine andere Strategie verwenden, um eine Referenz auf die andere Komponente zu erhalten.

Der beste Weg ist, nicht einen Verweis auf die Komponente überhaupt zu erhalten, sondern stattdessen einen gemeinsamen Dienst für beide bereitzustellen und mit Observablen zu kommunizieren.

Weitere Einzelheiten finden Sie unter dieses offizielle eckige 2 Kochbuch

Original

Wenn beide Komponenten "völlig unabhängig" sind, nehme ich an, dass sie aus einzelnen Bootstrapping-Modulen stammen und sich daher in verschiedenen Angular2-Anwendungen auf derselben Seite befinden.

In diesem Fall werden diese Komponenten in verschiedenen Zonen ausgeführt, und das Ereignis click bewirkt nur eine Änderungserkennung in der aufrufenden Komponente, jedoch nicht in der aufgerufenen Komponente.

Sie müssen die Änderungserkennung im aufgerufenen Objekt explizit aufrufen, um die Ansicht zu aktualisieren. Zum Beispiel wie

%Vor%

oder

%Vor%     
Günter Zöchbauer 27.09.2016, 11:01
quelle
1

Gelöst

Wie ich in der Frage ausgeführt habe, funktionierte die Lösung von Günter , die die zweite Reihe von Dateien ist, nach dem Hinzufügen von UpdateService als provider in @NgModule von app.module.ts

    
Manel 27.09.2016 15:44
quelle

Tags und Links