synchronization - pass - Angular2, mantenga la sincronización de los modelos entre los componentes

share data between components angular 4

Question

Estoy considerando mudarme a Angular2 desde mi columna vertebral de confianza (o debería decir, mi jefe quiere jugar con un juguete nuevo, lo cual está bien para mí), busqué mucho en línea e hice algunas pruebas, pero parece que no puedo encuentra la respuesta a esta simple pregunta:

¿Puedo mantener 2 modelos sincronizados entre dos componentes? Ejemplo: Tengo una lista de usuarios en la barra lateral, que es un componente, y un formulario para editar dichos usuarios en mi "página principal", que es otro componente.

La barra lateral es responsable de mostrar su colección, y el formulario es responsable de obtener su modelo. Cuando se actualiza el modelo, quiero que los cambios se reflejen en la barra lateral, sin volver a pasar por el servidor.

Sé que SpinJS hace esto y pirateé algo en Backbone usando eventos para lograr lo mismo (basado en la clase de modelo y la identificación), pero me pregunto si Angular2 tiene una forma nativa de manejar eso. De no ser así, ¿cómo se puede lograr implementar este tipo de comportamiento?

Gracias.

EDITAR:

Agregué mis archivos de prueba en este Plunker: http://plnkr.co/edit/jIdnu68ZDMDSFJkomN3Y

Primero, seleccione un héroe y haga clic en "ver detalles", esto hará que una solicitud http.get al servidor en memoria para obtener el Héroe.

Segundo, haz clic en "Dar espada", esto agregará un arma al usuario seleccionado. Para fines de prueba, en lugar de usar el usuario ya cargado, solicito el mismo utilizando http.get nuevamente.

Cuando cambio el nombre en el cuadro de texto, el nombre de la segunda instancia no se actualiza.

Debes imaginar que no puedo usar la instancia actual de héroe por los motivos que sea, quiero volver a solicitarlo desde el servidor.

Answer 1

Puede compartir un servicio entre componentes.

@Injectable()
export class SharedService {
  someField:string;
}

@Component({selector: ''parent-cmp'', providers [SharedService], ...)
export class ParentCmp {
  constructor(private model:SharedServicee) {
  }
}

@Component({selector: ''child-cmp'', 
   // don''t add it to providers here so it gets the same instance 
   // the parent got
   /*providers [SharedService] */, ...)
export class ChildCmp {
  constructor(private model:SharedServicee) {
  }
}

Cuando un componente cambia un campo en el servicio, el otro servicio también es visible en el otro componente.

Puede usar Observable o EventEmitter para notificar a las partes interesadas sobre cambios u otros eventos.

Answer 2

Puede usar servicios compartidos para suscribirse a un mismo evento en diferentes componentes. (si proporciona este servicio en el arranque, le dará el mismo objeto en todos los componentes. ¡Muy importante!).

Si desea llamar a http.get solo una vez, y luego simplemente reproducir esa llamada, debe usar:

private _subject = new ReplaySubject(1);
constructor(public http: Http) {
    this.http
        .get("...").subscribe(this._subject);
}

Ejemplo de trabajo completo: https://plnkr.co/edit/G1mSXfpuYaIGXNwK5WKy?p=preview

Eche un vistazo al panel de red (cromo), la llamada ajax se activa solo una vez.

Answer 3

Creo que la mejor manera de hacerlo es aprovechar EventEmitter en un servicio compartido. Cuando se realiza un cambio, se emite un evento en el emisor del evento. Se notificarán otras partes de la aplicación que se hayan registrado en su contra.

Ver esta respuesta:

• Delegación: EventEmitter u Observable en Angular2