Comunicación entre componentes de Angular

Esta lección le mostrará cómo usar la propiedad de entrada para enviar información de un componente principal a un componente secundario. Así que aquí tengo una aplicación de inicio. que se generó con la CLI de Angular. Y primero, voy a generar un componente principal. y un componente hijo para pasar información entre ellos. Y aquí me salté la generación del archivo de prueba. y el archivo CSS separado. Y luego, en la plantilla del componente de la aplicación raíz, Voy a borrar todo el código de inicio y luego agregue ese componente principal. Así que ahora que está configurado, Voy a abrir la plantilla principal y luego incrustar en ese el componente secundario. Así que ahora que, ese componente secundario está en el componente principal, Voy a abrir la clase de componente infantil, y luego voy a importar el decorador de entrada de la biblioteca del núcleo de Angular. Por lo tanto, las propiedades de entrada se pueden usar para enviar información. de un componente padre a un componente hijo, y mantiene esa información sincronizada. Entonces, a continuación, declararé una propiedad de entrada en la clase de componente hijo. Entonces, el decorador de entrada es lo que marca el mensaje. como una propiedad de entrada, y una propiedad de entrada está vinculada a una propiedad en el Dom. En este caso, se vinculará en el componente principal. Cuando se actualiza esa propiedad en el Dom del padre, Angular actualizará esta propiedad de entrada en la clase de componente hijo también, que es lo que mantiene esos datos sincronizados. Así que aquí tengo la propiedad configurada con un operador de asignación definido ya que esta propiedad va a recibir su valor inicial del padre. Sin embargo, también puede establecer un valor predeterminado para la propiedad como tal. Entonces aquí, si este componente no se inicializó de ninguna manera sin que la propiedad de entrada esté vinculada en el componente principal, entonces este valor de mensaje sería bienvenida por defecto. Y a continuación mostraré este mensaje en la plantilla del componente secundario. Entonces, ahora que el componente secundario está configurado para recibir ese valor de entrada, el padre necesita pasar ese valor al niño. Entonces, primero en la clase de componente principal, Definiré un mensaje para transmitir. Luego, en la plantilla principal, Vincularé esto a la propiedad de entrada de los componentes secundarios. Entonces aquí estoy usando el enlace de propiedad, que se hace con los corchetes para vincular la variable de mensaje principal a la propiedad de entrada del mensaje que se creó en el componente secundario. Y luego, viendo eso en el navegador, puede ver el mensaje que se estableció en el componente principal se pasa y se muestra en el componente secundario. Por lo tanto, es posible que a veces desee hacer referencia a ese valor de entrada por un nombre diferente dentro de la clase de componente hijo. En esos casos, puede crear un alias para la propiedad de entrada. Volviendo a la clase de componentes secundarios, Cambiaré el nombre de esta propiedad a mensaje principal. Y luego en el decorador de entrada, pasar el nombre de la propiedad que el componente principal es vinculante para. En este caso, ese es el mensaje. Y ahora que el componente hijo sabe esta propiedad de entrada como mensaje principal, la plantilla debe actualizarse. Y luego ver eso en el navegador puedes ver eso, ese mensaje todavía se está pasando de padres a hijos. Así que eso es todo por esta lección sobre cómo usar las propiedades de entrada para comunicarse del componente principal al secundario. Y en la próxima lección, aprenderá a interceptar cualquier cambio de valor de entrada usando setters y getters.