Crear interfaz de usuario con un componente Angular

    Cuando se trata de crear una interfaz de usuario en una aplicación Angular, puede utilizar un componente Angular para facilitar el proceso.

    Crear una interfaz en Angular es muy similar a cómo haríamos una en WPF. Normalmente usamos controles de usuario, representados por la clase UserControl. A agrupaUserControl el marcado y el código en un contenedor reutilizable, permitiendo que la misma interfaz y funcionalidad se utilicen en varios lugares diferentes. Este control de usuario tendrá un archivo .xaml para el marcado de la interfaz y un archivo C# para la lógica, y luego puede incluso tener un diccionario de recursos, que contendrá cualquier tipo de información de estilo para este control de usuario. Mientras que en Angular, usamos lo que se llama unComponent. Un componente tiene un archivo html, que se utiliza para cualquier marcado de la interfaz. Tiene un archivo typescript, que se usa para sus propiedades y lógica, y luego utiliza un archivo CSS para toda su información de estilo. Veamos lo parecidos que son estos dos.

    Estructura de componentes

    En el lado izquierdo, tenemos una aplicación WPF, con un control de usuario llamadoSample. También tiene un diccionario de recursos llamadoSampleResources que contiene información sobre estilo. En el lado derecho, tenemos una Angular aplicación con unaAppComponent. Vamos a comparar el componente de la app Angular con el del control de usuario de ejemplo en la aplicación WPF.

    Empieza abriendo el archivo de scriptscripts de componentes de la app. Podemos pensar en este archivo como el código detrás del componente, y la razón por la que pensamos así es porque si entramos en WPF y abrimos el Sample.xaml.cs, el código detrás delSample control de usuario, podemos ver muchas similitudes.

    Código de componentes detrás

    Primero podemos ver que tenemos una clase que estamos exportando llamadaAppComponent. Ahora, este AppComponent también tiene una propiedad llamada título. Así que dentro de esta clase vamos a definir todas las propiedades, métodos y eventos necesarios para que nuestro componente se ejecute. Esto es extremadamente similar, si no exactamente igual, al control del usuario. Podemos ver que tenemos una clase, en este caso llamadaSample, y dentro de esta clase vamos a definir todas las propiedades, métodos y eventos necesarios para que el control del usuario funcione.

    A continuación, avancemos unas líneas en el archivo typescript y veamos esta sintaxis rara con el pequeño@ símbolo y luego Component. Esto en realidad se llama decorador. Este decorador Angular está diciendo cómo vamos a tratar esta clase que estamos exportando. En este caso, lo vamos a tratar como un componente y, como lo tratamos como tal, tenemos que proporcionar información al decorador. Antes de llegar a la información, prestemos atención primero a la línea superior del archivo typescript -import { Component } from '@angular/core'. Puedes pensar en esto como una afirmación de uso. Básicamente, estamos importando los objetos necesarios para que este componente funcione. En este caso, estamos importando elComponent del@angular/core módulo, así que podemos usar el decorador para este componente. Eso es extremadamente similar a una instrucción using dentro del código detrás de nuestro control de usuario. Usamosusing sentencias dentro de C# para localizar y emplear objetos dentro de nuestra clase que son necesarios para que el control del usuario funcione.

    Ahora, volvamos al interior del decorador de componentes.

    • La línea de código en la línea 4 se llama selector. El selector nos ayuda a determinar cómo vamos a definir estos elementos en html. Este selector se llamaapp-root, así que si abrimos el index.html, podríamos ver dentro del cuerpo un elemento llamadoapp-root. Ese elemento utiliza el selector definido en el decorador de componentes para definir una instancia de este componente.
    • A continuación, en la línea 5, tenemos lo que se llama una URL plantilla. Esto apunta a un archivo llamadoapp.component.html el archivo html que representa la representación visual de este componente. Esto es extremadamente similar alSample.xaml archivo del control de usuario en WPF, donde el xaml es el marcado que representa cómo se va a renderizar este control.
    • En la línea 6, vemos las URLs de estilo. La URL del estilo apunta a un archivo CSS. Este archivo representa la información de estilo del componente. Así que si abrimos elapp.component.css archivo, podemos ver que no hay información de estilo aquí, pero podemos pensar en el archivo CSS como un mapeo directo a un diccionario de recursos. El diccionario de recursos en XAML contendrá toda la información de estilo para el control del usuario o elementos dentro del control del usuario, de modo que se renderice según nuestro diseño. Eso es exactamente lo mismo que harías en CSS.

    Generate a component

    Ahora que hemos visto lo similar que es un componente Angular a un control de usuario WPF, creemos un nuevo componente y añadiérmoslo a nuestra aplicación. Si eres desarrollador de escritorio, en WPF, cuando quieres añadir un nuevo control de usuario, simplemente haces clic derecho en tu proyecto y dices Añadir > Control de usuario. Bueno, por supuesto, si intentas hacer lo mismo en Visual Studio Code, no tienes esa opción. Solo tienes un archivo nuevo, una carpeta nueva. Eso significa que tenemos que entrar en nuestro terminal y usar la CLI de Angular para generar nuestro componente. Así que vamos a alternar un terminal escribiendoControl + Backtick. En el terminal simplemente escribimos NG G para generar, C para componente, y luego proporcionamos un nombre para nuestro componente, por ejemplosample.

    ng g c sample

    Cuando termina el comando, notarás que han ocurrido varias cosas. Primero, tenemos una carpeta nueva con el mismo nombre que hemos dado a nuestro componente. También tenemos cuatro archivos nuevos: un archivo html, un archivo SPEC, un archivo typescript y un archivo CSS. También hicimos una actualización alapp.module.ts archivo.

    Componente de muestra

    Mira lasample carpeta que contiene nuestro componente recién creado. Podemos ver que los tres archivos necesarios para un componente están ahí, además de este archivo SPEC extra. En realidad, este es un archivo de prueba que no necesitamos para este artículo, así que no vamos a molestarnos con él ahora. También hicimos una modificación en el app.module.ts, en la que añadió el componente de muestra a ladeclarations sección de nuestro NgModule.

    Note

    Esto es importante: cada vez que se crea un nuevo componente, debe declararse en la sección de declaraciones del módulo NG. Esta sección básicamente dice qué componentes pertenecen a este módulo.

    Volvamos a nuestrosample.component.ts expediente. Se parece mucho alapp.component.ts archivo que mencionamos arriba. En este caso tenemos nuestra declaración de importación donde estamos importando nuestro componente. Tenemos a nuestro decorador componente con quien definimos nuestro selector comoapp-sample. Tenemos la URL de la plantilla ysample.component.html la URLsample.component.css de estilo.

    Vamos a abrir el archivo html donde podemos ver un párrafo quesample works! dice. Queremos ver esto cuando empecemos la solicitud, así que vamos a la app.component.html. Eliminaremos la mayor parte de la marca inicial excepto el título, y simplemente añadiremos<app-sample></app-sample>.

    <div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <app-sample></app-sample>
</div>

    Run the application

    Al escribirnpm start el terminal, compilará y construirá nuestra aplicación y la iniciará dentro del navegador. Si todo ha ido bien, nuestra aplicación debería estar ejecutándose en el navegador. Tenemoswelcome to app: el marcado del componente app y luegosample works!. Este es el marcado de nuestro componente de muestra que acabamos de añadir. Ahora cambiemos un poco nuestro componente de muestra cambiando el texto a '¡Esta muestra funciona muy bien!'.

    <p>
  This sample works very well!
</p>

    Una vez guardemos y revisemos el navegador, veremos que efectivamente estamos editando el html responsable de renderizar el componente de muestra. Si queremos estilizar nuestro componente, necesitamos mirar nuestra URL de estilo. Así que abramos nuestrosample.component.css archivo y pongamos la etiqueta de párrafo en rojo.

    p {
    color: red;
}

    Una vez que guardemos eso y abramos el navegador, deberíamos ver que el estilo en el archivo CSS se ha aplicado a nuestro componente de muestra.

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.