Cómo usar el decorador de salida en Angular

En Angular, una página web puede contener muchos componentes reutilizables diferentes. Cada componente suele contener su propia lógica TypeScript, plantilla HTML y estilo CSS.

También puede reutilizar componentes dentro de otros componentes. En este caso, puede utilizar el decorador de salida para enviar información de un componente secundario a su componente principal.

También puede usar el decorador de salida para escuchar los eventos que ocurren en el componente secundario.

Cómo agregar el decorador de salida a un componente secundario

Primero, deberá crear una nueva aplicación Angular con un componente principal y un componente secundario.

Una vez que tenga un componente primario y secundario, puede usar el decorador de salida para transferir datos y escuchar eventos entre los dos componentes.

1. Crear un nuevo aplicación angular. De forma predeterminada, "aplicación" es el nombre del componente raíz. Este componente incluye tres archivos principales: "app.component.html", "app.component.css" y "app.component.ts".
2. Para este ejemplo, el componente "aplicación" actuará como el componente principal. Reemplace todo el contenido en "app.component.html" con lo siguiente:

   <divisiónclase="componente padre">
   <h1> Este es el componente principal h1>
   división>

3. Agregue algo de estilo al componente de la aplicación principal en "app.component.css":

   .parent-component {
   Familia tipográfica: Arial, Helvética, sans-serif;
   color de fondo: coral claro;
   relleno: 20píxeles
   }

4. Use el comando "ng generar componente" para crear un nuevo componente angular llamado "componente de datos". En este ejemplo, "componente de datos" representará el componente secundario.

   ng g c componente de datos

5. Agregue contenido al componente secundario en "data-component.component.html". Reemplace el contenido actual para agregar un nuevo botón. Vincule el botón a una función que se ejecutará cuando el usuario haga clic en él:

   <divisiónclase="componente secundario">
   <pag> Este es el componente hijo pag>
   <botón (hacer clic)="onButtonClick()">Haz click en mibotón>
   división>

6. Agregue algo de estilo al componente secundario en "data-component.component.css":

   .componente secundario {
   Familia tipográfica: Arial, Helvética, sans-serif;
   color de fondo: azul claro;
   margen: 20píxeles;
   relleno: 20píxeles
   }

7. Agregue la función onButtonClick() al archivo TypeScript para el componente, en "data-component.component.ts":

   al hacer clic en el botón () {
   }

8. Todavía dentro del archivo TypeScript, agregue "Salida" y "EventEmitter" a la lista de importaciones:

   importar { Componente, Salida, EventEmitter, OnInit } de'@angular/núcleo';

9. Dentro de la clase DataComponentComponent, declare una variable de salida para el componente llamado "buttonWasClicked". Este será un EventEmitter. Un EventEmitter es una clase integrada que le permite informar a otro componente cuando ocurre un evento.

   exportarclase DataComponentComponent implementos AlIniciar {
   @Producción() se hizo clic en el botón = nuevo Emisor de eventos<vacío>();
   // ...
   }

10. Utilice el emisor de eventos "buttonWasClicked" dentro de la función onButtonClick(). Cuando el usuario hace clic en el botón, el componente de datos enviará este evento al componente principal de la aplicación.

    al hacer clic en el botón () {
    este.buttonWasClicked.emit();
    }

Cómo escuchar eventos en el componente secundario desde el componente principal

Para usar la propiedad Salida del componente secundario, deberá escuchar el evento emitido desde el componente principal.

1. Use el componente secundario dentro de "app.component.html". Puede agregar el resultado "buttonWasClicked" como una propiedad al crear la etiqueta HTML. Vincule el evento a una nueva función.

   <componente de datos de la aplicación (se hizo clic en el botón)="buttonInChildComponentWasClicked()">componente de datos de la aplicación>

2. Dentro de "app.component.ts", agregue la nueva función para manejar el evento de clic de botón cuando ocurre en el componente secundario. Crea un mensaje cuando el usuario hace clic en el botón.

   mensaje: cadena = ""
   Se hizo clic en el componente secundario del botón () {
   este.mensaje = 'Se hizo clic en el botón del componente secundario';
   }

3. Muestre el mensaje en "app.component.html":

   <pag>{{mensaje}}pag>

4. Escriba el comando "ng serve" en una terminal para ejecutar su aplicación Angular. Ábralo en un navegador web en localhost: 4200. Los componentes principal y secundario utilizan diferentes colores de fondo para que sea más fácil distinguirlos.
5. Clickea en el Haz click en mi botón. El componente secundario enviará el evento al componente principal, que mostrará el mensaje.

Cómo enviar datos de un componente secundario a un componente principal

También puede enviar datos desde el componente secundario al componente principal.

1. En "data-component.component.ts", agregue una variable para almacenar una lista de cadenas que contengan algunos datos.

   listaDePersonas: cadena[] = ['joey', 'John', 'Jaime'];

2. Modifique el tipo de devolución del emisor de eventos buttonWasClicked. Cámbielo de void a string[], para que coincida con la lista de cadenas que declaró en el paso anterior:

   @Producción() se hizo clic en el botón = nuevo Emisor de eventos<cadena[]>();

3. Modifique la función onButtonClick(). Al enviar el evento al componente principal, agregue los datos como argumento en la función emit():

   al hacer clic en el botón () {
   este.buttonWasClicked.emit(este.listaDePersonas);
   }

4. En "app.component.html", modifique la etiqueta "app-data-component". Agregue el "$ evento" en la función buttonInChildComponentWasClicked(). Contiene los datos enviados desde el componente secundario.

   <componente de datos de la aplicación (se hizo clic en el botón)="buttonInChildComponentWasClicked($event)">componente de datos de la aplicación>

5. Actualice la función en "app.component.ts" para agregar el parámetro para los datos:

   buttonInChildComponentWasClicked (dataFromChild: cadena[]) {
   este.mensaje = 'Se hizo clic en el botón del componente secundario';
   }

6. Agregue una nueva variable llamada "datos" para almacenar los datos provenientes del componente secundario:

   mensaje: cadena = ""
   datos: cadena[] = []
   buttonInChildComponentWasClicked (dataFromChild: cadena[]) {
   este.mensaje = 'Se hizo clic en el botón del componente secundario';
   este.data = dataFromChild;
   }

7. Mostrar los datos en la página HTML:

   <pag>{{datos.join(', ')}}pag>

8. Escriba el comando "ng serve" en una terminal para ejecutar su aplicación Angular. Ábralo en un navegador web en localhost: 4200.
9. Clickea en el Haz click en mi botón. El componente secundario enviará los datos del componente secundario al componente principal.

Envío de datos a otros componentes mediante el decorador de salida

Hay otros decoradores que puede usar en Angular, como el decorador de entrada o el decorador de componentes. Puede obtener más información sobre cómo puede usar otros decoradores en Angular para simplificar su código.