cli - angular wikipedia

Angular2-Cómo compartir datos/cambio entre componentes

Question

Supongamos que tiene una interfaz que tiene una barra de herramientas, una barra lateral y una cuadrícula. La barra de herramientas tiene un menú desplegable que cuando un usuario cambia, el contenido de la barra lateral y la cuadrícula cambian. De vuelta en Angular 1, usaría un Servicio para tener todos mis datos dinámicos. Cuando algo cambia en el servicio, todos los componentes que usan ese servicio también se actualizarán.

Bueno, en Angular 2, parece que las personas están usando diferentes métodos. Quería obtener su opinión sobre cuál es la forma preferida.

• Servicio estático
• En cambios
• Entradas y salidas

Actualizado - 03/09/16

Parece que la mejor solución es el hilo que publicó Thierry Templier: Delegación: EventEmitter u Observable en Angular2

La pregunta restante que tengo es si es una práctica recomendada crear un nuevo servicio para cada elemento de datos que se comparte entre componentes o si solo podemos tener un servicio que tenga un objeto que almacene todos los datos compartidos.

See Plnkr for code

Plunker original - Cada cambio tendrá su propio servicio.

Plunker revisado, por ejemplo : solo un servicio que almacena todos los datos en un objeto. Se pasará un tipo a cada oyente para verificar si necesita hacer algo basado en ese tipo.

Answer 1

En su caso de uso yo usaría servicios. Los servicios se utilizan para comunicar sus datos a otros componentes. Un componente podría actualizar estos datos al servicio, y otro componente podría leerlo. O ambos componentes podrían simplemente leerlo, y el propio servidor obtiene sus datos del "mundo exterior".

Utiliza la input para pasar datos del padre al hijo y la output para generar eventos del hijo al padre.

ngOnChanges para hacer algo cuando algo cambia en el componente en sí, pero prefiero usar las funciones get() y set() para eso.

Al menos, esa es mi opinión sobre esto :)

Answer 2

Usted podría aprovechar el servicio compartido para esto. Podría contener datos y observables para suscribirse para recibir notificaciones cuando se actualicen los datos.

• Servicio

  export class ListService {
    list1Event: EventEmitter<any> = new EventEmitter();
  
    getLists() {
      return this.http.get(url).map(res => res.json())
        .subscribe(
          (data) => {
            this.list1Event.emit(data.list1);
          }
        );
    }
  }

• Componente

  @Component({
    selector: ''my-component1'',
    template: `
      <ul>
       <li *ngFor="#item of list">{{item.name}}</li>
      </ul>
    `
  })
  export class MyComponent1 {
    constructor(private service:ListService) {
      this.service.list1Event.subscribe(data => {
        this.list = data;
      });
    }
  }

• oreja

  bootstrap(AppComponent, [ ListService ]);

Vea esta pregunta para más detalles:

• Delegación: EventEmitter u Observable en Angular2
• Delegación: EventEmitter u Observable en Angular2
• Es posible tener dos plantillas para el servicio de llamada única en AngularJS 2