2017-06-14 1 views
0

Ich arbeite in eckigen 2. Was ich damit konfrontiert bin, rufe ich eine Funktion der Kind-Komponente von Eltern. und child function aktualisiere meinen Datensatz, der zuerst html lädt. aber wenn ich auf demselben html stehe und diese Funktion erneut aufrufen, wird in der Konsole angezeigt, dass der Datensatz mit neuen Daten geladen wurde, aber nicht mit dem HTML-Code. Voll Szenario: ich habe eine Suchleiste in meinem Kopfbereich ein. von wo Redirects zu Ergebnisseite und rufen Sie auch seine Funktion, die Abfrage Daten zeigt. aber als ich schon mal query gesucht habe und auf der ergebnisseite stand. Neue Datenabfrage ruft die Funktion erneut auf und der Datensatz wird aktualisiert. aber Komponentendosis html lt. diesem Datensatz nicht neu laden. Wie kann ich es neu laden? irgendwelche Vorschläge.? Hier sind Codebeispiele. meine header.tsWarum DOM nach Aktualisierung nicht aktualisiert wird Datensatz in Winkel 2?

Search(){ 
localStorage.setItem('val',JSON.stringify(this.query)); 

this.router.navigate(['/results']); 
this.mobiles.ngOnInit(); 

     } 


} 

und resuls.ts

ngOnInit() { 


     this.query=JSON.parse(localStorage.getItem('val')); 
alert(this.query) 

this.httpService.searchGeneric(this.query,1).subscribe(
     data => { 
     this.Getspecs = data; 

    this.count=data['totalItems']; 

    this.ref.detectChanges(); 
     this.ref.reattach(); 

    console.log(data) 

    } 
    ); 

warum neue Änderungen erscheinen nicht in HTML-Ergebniskomponente? Hat jemand eine Idee dazu? brauchte jede Hilfe. Vielen Dank.

+0

Sie leiten erneut auf die gleiche Seite um, sobald Sie die Funktion auf der Ergebnisseite aufrufen. Wenn Sie auf einer Komponente sind und dieselbe Komponente erneut laden, wird Angular Ihre Bindung nicht aktualisieren. Es ist eher eine Leistungsverbesserung, um die Bindung für eine bereits geladene Komponente nicht erneut zu aktualisieren. –

+0

Lesen Sie [https://angular.io/guide/router#observable-params-and-component-reuse] Dies zeigt Ihnen den Weg, um zu erreichen, was Sie wollen. –

Antwort

0

So funktioniert Angular.

Sie verwenden die gleiche Funktion, die bedeutet, dass Sie wieder auf das gleiche Bauteil Umleiten.

Wenn Sie sich auf einer Komponente befinden und dieselbe Komponente erneut laden, aktualisiert Angular die Bindung nicht. Es ist eher eine Leistungsverbesserung, um die Bindung für eine bereits geladene Komponente nicht erneut zu aktualisieren.

Allerdings bietet eckig eine Möglichkeit, wenn Sie die Bindungen beim erneuten Laden explizit ändern müssen. Sie können params beobachtbar verwenden und die params bei einer Routenänderung abonnieren. Jede Aktion innerhalb dieses Abonnements wird gezwungen, die Bindung zu ändern.

Weitere Informationen here bei Angular offiziellen docs.

+0

ein einfaches Beispiel? oder irgendwelche Änderungen, die Sie möglicherweise in meinem Code zur Verfügung stellen können? – maadi

Verwandte Themen