Redraw-Komponente nach dem wechselseitigen Objekt

Question

Look-Code.

import {Component} from 'angular2/core'; 
import {App} from 'client/project/project.app'; 
import {ProjectService} from 'service/project.service'; 

@Component({ 
    selector: 'project-info', 
    templateUrl: 'client/project/info/project-info.html' 
}) 
export class ProjectInfoComponent { 
    project:IProject; 

    constructor(
     private app: App, 
     private projectService: ProjectService 
    ){   
     this.project = this.app.selectedProject; 
    } 
} 

ich ändern this.app.selectedProject = {...} in einer anderen Komponente, würde ich auf diese Komponente rerender mag. Wie es geht? Nur erfunden, wenn EventEmitter verwendet wird.

this.app.selectedProject.subscribe(project => { 
this.project = project; 
}); 

Answer 1

In der Tat, es hängt davon ab, wie Sie die this.app.selectedProject aktualisieren. Angular2 erkennt standardmäßig nur, wenn sich die gesamte Referenz nicht ändert, wenn Elemente im Objekt aktualisiert werden.

// For example updating the name of selectedProject. This won't 
// refresh the component view 
this.app.selectedProject.name = 'some name'; 

// For example updating the name of selectedProject. This will 
// refresh the component view 
this.project = { name: 'some name' }; 

Wenn Sie wirklich Änderungen in dem Objekt erkennen möchten, auf das Sie verweisen. Sie müssen die Schnittstelle DoCheck und die Klasse KeyValueDiffers nutzen, um eine benutzerdefinierte Überprüfung zu implementieren. Hier ist ein Beispiel:

@Component({ 
    selector: 'project-info', 
    (...) 
}) 
export class ProjectInfoComponent implements DoCheck { 
    project: IProject; 
    differ: any; 

    constructor(differs: KeyValueDiffers) { 
    this.differ = differs.find([]).create(null); 
    } 

    ngDoCheck() { 
    var changes = this.differ.diff(this.myObject); 

    if (changes) { 
     changes.forEachChangedItem((elt) => { 
     // elt.key tells which property in the object was updated 
     } 
    }); 
    } 
} 

Sehen Sie diese Frage für weitere Informationen:

• detect change of nested property for component input

Answer 2

Ich weiß nicht, ob dies die beste Praxis ist oder nicht, aber ich don‘ t wie Änderung Erkennung und lieber mit Ereignissen arbeiten, so, wie ich mit ähnlichen Fällen umgehen:

Zunächst einmal, bedenken Sie, dass Daten nach unten fließt, Ereignis flo w nach oben (wenn man bedenkt, dass das Elternteil oben ist). Mit anderen Worten, wenn Sie Daten ändern möchten, ändern Sie es in Parent, und Kind wird automatisch aktualisiert, und dazu müssen Sie eine gerade an die Eltern senden.

1. nun in dem Kind, dass zu tun, wir @Output() eventToSend: EventEmitter = new EventEmitter(); definieren sollte und wir auslösen es von this.eventToSend.next(params);
2. Im Eltern setzen wir auf das Ereignis zu hören haben, ist eine Möglichkeit, in der Vorlage zu tun, Sie können (eventToSend)="eventListen($event)" hinzufügen und in Ihrer ts Datei können Sie einfach eventListen(params) definieren und tun, was Sie wollen.

Ich hoffe, das ist, was Sie suchen.

Answer 3

Wenn Sie in der "anderen Komponente" der Eigenschaft selectedProject des Dienstes wirklich ein anderes Objekt zuweisen, wird die ProjectInfoComponent nie wissen ... es ist project Eigenschaft wird immer noch einen Verweis auf (zeigen auf) das Original/vorherige ausgewähltes Projektobjekt, das im Konstruktor festgelegt wurde.

Wenn die Eigenschaft project von ProjectInfoComponent benachrichtigt werden muss, wenn sich das ausgewählte Projekt ändert, verwenden Sie einen Betreff oder ein Observable. Das Kochbuch hat ein gutes Beispiel dafür, wie man Themen und Observable verwendet: bi-directional service.

Wenn Sie nicht benachrichtigt werden müssen (dh Sie müssen keine Komponentenlogik/Code ausführen, wenn sich das ausgewählte Projekt ändert), wäre eine einfachere Lösung, an die Serviceeigenschaft zu binden, anstatt Ihre zu erstellen eigene project Referenz (die nicht synchron sein kann). ZB in der Vorlage der ProjectInfoComponent, verwenden Sie etwas wie {{app.selectedProject.somePropertyHere}}. Wenn sich nun die Eigenschaft selectedProject des Service ändert, wird die Ansicht aktualisiert.