variables globales angular 5

De nuevo sobre datos globales en Angular2

Question

Si mi aplicación angular2 se ve así, y una rubia arriba va a hablar con jengibre en la mitad derecha, ¿deberían organizar una fiesta para eso?

Emite eventos, usa entradas y salidas. ¿Esto es angular2? Los datos deben fluir de hijo a padre en la raíz, y luego de padre a hijo en el punto? Soy nuevo aquí y, a menudo, me gustaría tener algún objeto global donde pueda mantener cierta información que todos los componentes necesitan saber. Cuando los datos cambian en ese objeto global, deberían cambiarse mágicamente en todos los demás servicios y componentes que inyectó. Por ejemplo, usuario de inicio / cierre de sesión, o si hace clic en el botón y así sucesivamente.

import {Injectable} from ''angular2/core'';
@Injectable()
export object Globals {
logged: false,
showThatDiv: true
}

Pero leí en alguna parte que es Angular1, no Angular2. ¿Es correcto? ¿O estoy equivocado? No se ve como la sopa global, solo el objeto del estado global.

Por ejemplo ahora tengo esta estructura:

|-root
|-google api component
|-google auth
|-youtube api
|-playlists
|-video
|-myComponent
|-sub1
|-sub2
|-sub3
|...

El componente mySub1 necesita saber si el usuario inició sesión y, si es así, muestra (* ngIf) alguna div en sub2. O desde el componente mySub3, checkGauth () en el servicio googleAuth. Desde el componente mySub2, agregue un video a la lista de reproducción de YouTube y muestre los resultados agregados en sub2, o desde el sub3 cree una nueva lista de reproducción y muéstrela en sub2. Muchas variantes.

Estoy cansado de escribir código para todo eso. Lo hace más complejo. Y a veces pensando en hacer esto:

 |-root
|-google api component
|-google auth
|-youtube api
|-playlists
|-video
|-myComponent
|-sub1
|-sub2
|-sub3
|...

Answer 1

La creación de servicios para cada una de sus API es una excelente manera de aislar componentes para que no se mezclen. En su caso, debe crear un servicio de Google que pueda contener su contexto en el estado actual en que se ejecuta la aplicación. Los servicios son inyectables para sus componentes cuando y donde se necesiten.

Habiendo dicho que no hay una línea fina que podamos dibujar en algunos casos. En esos casos,

1. Paso del mensaje: pase la información a través de sus componentes, en su caso, si su padre sabe acerca del inicio de sesión y el niño quiere saber acerca del Inicio de sesión, páselo y los enlaces lo mantendrán actualizado para que lo use de manera confiable en sus componentes secundarios.

2. Cree un Ayudante que encapsule todas sus funciones relacionadas con su función. Haz referencia a él utilizando la importación antigua y utilízalo en tus componentes.

Emite eventos, usa entradas y salidas. ¿Esto es angular2?

Sí, es la mejor manera de saber qué necesitan sus componentes y qué componentes emiten. Pero esto no es difícil, el enlace de datos bidireccionales le permite hacer que esto funcione con el mínimo esfuerzo.

Los datos deben fluir de hijo a padre en la raíz, y luego de padre a hijo en el punto?

Deje que el niño obtenga los datos del padre a través de entradas y devuelva una salida como devoluciones de llamada. Consulte este blog para ver cómo se hace en una aplicación del mundo real.

Espero que te ayude a empezar. Bienvenido a Angular 2 te encantará aquí!