Un componente es uno de los bloques de construcción más importantes de una aplicación Angular. Los componentes son fragmentos de código reutilizables que componen ciertas secciones de su sitio web.
Los ejemplos de componentes que puede crear incluyen elementos de interfaz de usuario más pequeños, como botones o tarjetas. También pueden incluir elementos de interfaz de usuario más grandes, como barras laterales, barras de navegación o páginas completas.
Usando Componentes en Angular
Cuando crea componentes en una aplicación Angular, puede usarlos dentro de otros componentes. Por ejemplo, podría crear un componente para un elemento de tarjeta de interfaz de usuario grande. A continuación, puede utilizar este componente como una etiqueta HTML normal, en cualquier lugar que desee:
<aplicación-nuevo-componente></app-new-component>Dado que los componentes son bits de código reutilizables, también puede pasar variables para que los datos de cada instancia sean diferentes. También puede crear componentes para páginas y puede enrutarlos en consecuencia utilizando el
app-routing.module.ts expediente.Puede diseñar sus componentes según la estructura de su aplicación y cuánto desea separar su funcionalidad.
Cómo crear un componente
Puedes usar el nggenerar comando para crear un nuevo componente.
- Crear un nuevo aplicación angular usando nuevo o abrir uno existente.
- Abra el símbolo del sistema o terminal. Alternativamente, si tiene su aplicación Angular abierta en un IDE como Visual Studio Code, puede utilizar el terminal incorporado.
- En la terminal, navegue hasta la ubicación de la carpeta raíz del proyecto. Por ejemplo:
discos compactos C:\Users\Sharl\Desktop\Angular-Application - ejecutar el ng generar componente comando, seguido del nombre del nuevo componente:
ng generar componente ui-card - El nuevo componente se creará en una nueva carpeta, dentro del origen/aplicación directorio.
Cómo agregar contenido al componente angular
Angular crea cada componente con un archivo HTML, CSS, TypeScript y especificación de prueba.
- los archivo HTML almacena el contenido HTML del componente.
- los archivo css almacena el estilo del componente.
- los Archivo de especificación de prueba (spec.ts) almacena cualquier prueba unitaria para el componente.
- los archivo mecanografiado almacena la lógica y la funcionalidad que define el componente.
Agregue algo de contenido al componente personalizado de la tarjeta ui.
- Abierto src/app/ui-card/ui-card.component.htmly actualice el HTML del componente. Asegúrese de tener una imagen con el mismo nombre en una carpeta llamada src/activos/imágenes en su aplicación Angular. Reemplazar el contenido de ui-card.component.html con lo siguiente:
<clase div="tarjeta">
<img origen="./assets/images/montañas-azules.jpg" alt="Avatar">
<clase div="envase">
<clase h4="título"> Montañas Azules </h4>
<pags> Nueva Gales del Sur, Australia </pags>
</div>
</div> - Abierto ui-card.component.cssy agregue contenido CSS al componente:
.tarjeta {
sombra de la caja: 0 4píxeles 8píxeles 0 rgb(0, 0, 0, 0.2);
ancho: 400píxeles;
relleno: 8píxeles;
margen: 24píxeles;
color de fondo: humo blanco;
Familia tipográfica: sans-serif;
}.tarjetaimagen {
anchura máxima: 400píxeles;
}.título {
acolchado superior: 16píxeles;
}.envase {
relleno: 2píxeles 16píxeles;
} - los ui-card.component.ts El archivo ya contiene una clase para el nuevo componente donde puede agregar nuevas funciones, lógica y funcionalidad. Debe tener un aspecto como este:
exportarclase Componente UiCard implementos AlIniciar {
constructor() { }
ngOnInit(): vacío {
// Agregue algo de lógica de código aquí
}
// O agregue su lógica y funcionalidad en nuevas funciones
}
Cómo usar el componente en el HTML de otro componente
En el interior ui-card.component.ts, hay tres atributos: selector, templateUrl y styleUrl. templateUrl hace referencia al HTML del componente (y, por lo tanto, se vincula al archivo HTML). El atributo styleUrls hace referencia al CSS del componente y vincula al archivo CSS.
@Componente({
selector: 'app-ui-tarjeta',
templateUrl: './ui-card.component.html',
URL de estilo: ['./ui-card.component.css']
})Cuando utilice el componente Tarjeta de interfaz de usuario en otro componente, utilizará el nombre del selector "app-ui-card".
- Primero, agregue algo de contenido a su página web. Abierto src/app/app.component.html y agrega una barra de navegación:
<clase div="encabezado de la barra de navegación">
<una clase ="título de navegación"><b> Barra de navegación web </b></a>
</div> - Agregue algo de estilo a su barra de navegación en src/app/app.component.css:
.navbar-encabezado {
color de fondo: #07393C;
relleno: 30píxeles 50píxeles;
monitor: flexionar;
alinear elementos: centro;
Familia tipográfica: sans-serif;
}.nav-título {
decoración de texto: ninguna;
color: blanco;
tamaño de fuente: 16punto;
} - Debajo de la barra de navegación en aplicación.componente.html, agregue una nueva tarjeta de interfaz de usuario. Use el nombre del selector "app-ui-card" como una etiqueta HTML:
<tarjeta de interfaz de usuario de la aplicación></app-ui-card> - También puede reutilizar el componente si incluye la etiqueta varias veces. Para hacerlo, reemplace la línea anterior para usar varias etiquetas HTML de app-ui-card en su lugar:
<estilo div="pantalla: flexionar">
<tarjeta de interfaz de usuario de la aplicación></app-ui-card>
<tarjeta de interfaz de usuario de la aplicación></app-ui-card>
<tarjeta de interfaz de usuario de la aplicación></app-ui-card>
</div> - Ejecute su aplicación Angular desde la terminal usando el ng servir y abra su sitio web en un navegador web.
Cómo pasar parámetros de entrada al componente
Dado que el componente es reutilizable, hay atributos que quizás desee cambiar cada vez que lo use. En este caso, puede utilizar parámetros de entrada.
- Agregar Aporte a la lista de importaciones en la parte superior de ui-card.component.ts:
importar { Componente, Entrada, OnInit } de '@angular/core'; - Luego agregue dos variables de entrada dentro del UICardComponent clase. Estos le permitirán cambiar el nombre de la ubicación y la imagen que se muestra en la tarjeta. Rellenar el ngOnInit como se muestra, para construir la ruta a la imagen o usar un valor predeterminado:
exportarclase Componente UiCard implementos AlIniciar {
@Aporte() nombre del lugar: cuerda;
@Aporte() Nombre de la imágen: cuerda;constructor() { }
ngOnInit(): vacío {
si (este.Nombre de la imágen) {
este.imageName = "./activos/imágenes/" + este.Nombre de la imágen;
} más {
este.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - En ui-card.component.html, cambie el valor codificado del Título 4 "Montañas Azules" para usar la variable de entrada "nombreDeUbicación" en su lugar. También cambie el código duro origen atributo en la etiqueta de la imagen para usar la variable de entrada "imageName":
<clase div="tarjeta">
<img origen="{{Nombre de la imágen}}" alt="Avatar">
<clase div="envase">
<clase h4="título">{{¿nombre del lugar? nombre del lugar: 'Montañas Azules'}}</h4>
<pags>Nueva Gales del Sur, Australia</pags>
</div>
</div> - En aplicación.componente.html, modifique las etiquetas "app-ui-card" para incluir las entradas "locationName" e "imageName". Para cada elemento de la tarjeta UI, ingrese un valor diferente. Asegúrese de que los archivos de imagen existan dentro de la carpeta de activos/imágenes de su aplicación Angular.
<estilo div="pantalla: flexionar">
<app-ui-card [nombreDeUbicación]="'Montañas Azules'" [nombre de la imagen]="'montañas-azules.jpg'"></app-ui-card>
<app-ui-card [nombreDeUbicación]="'Sídney'" [nombre de la imagen]="'sydney.jpg'"></app-ui-card>
<app-ui-card [nombreDeUbicación]="'Newcastle'" [nombre de la imagen]="'newcastle.jpg'"></app-ui-card>
</div> - Ejecute su aplicación Angular desde la terminal usando el ng servir y abra su sitio web en un navegador web.
Es posible que vea un error en este punto acerca de que estas propiedades no tienen inicializador. Si es así, simplemente agregue o establezca "inicialización de propiedad estricta": falso en tus tsconfig.json.
Cómo enrutar a un nuevo componente
Si su componente representa una gran parte de su sitio web, como una nueva página, también puede enrutar a ese componente.
- Abierto app-routing.module.ts. Importe el componente de la tarjeta UI en la parte superior del archivo:
importar {Componente UiCard} de './ui-card/ui-card.component'; - Agregue una ruta de enrutamiento a la matriz de rutas:
constante rutas: Rutas = [
//... Cualquier otra ruta que necesites...
{ ruta: 'uicard', componente: UiCardComponent },
] - Reemplazar todo el contenido actual en aplicación.componente.html para incluir solo la barra de navegación y una etiqueta HTML de salida del enrutador. El router-outlet te permite enrutar entre páginas. Agregue un hipervínculo a la barra de navegación, con el atributo href que coincida con la ruta en la matriz de rutas:
<clase div="encabezado de la barra de navegación">
<una clase ="título de navegación"><b> Barra de navegación web </b></a>
<una clase ="enlace de navegación" href="/uicard"><b> Tarjeta de interfaz de usuario </b></a>
</div>
<salida del enrutador></router-outlet> - Agregue un poco de estilo al nuevo enlace de la tarjeta de interfaz de usuario, en aplicación.componente.css:
.nav-a-enlace {
decoración de texto: ninguna;
color: #4b6569;
tamaño de fuente: 14punto;
margen izquierdo: 60píxeles;
peso de fuente: encendedor;
} - Ejecute su aplicación Angular desde la terminal usando el ng servir y abra su sitio web en un navegador web. El enlace aparecerá en la barra de navegación de la página web.
- Tome nota de la dirección URL en su navegador web. Por defecto, suele ser http://localhost: 4200/. Al hacer clic en el enlace de la tarjeta de interfaz de usuario, la página se enrutará a http://localhost: 4200/uicardy aparecerá la tarjeta de interfaz de usuario.
Creando Componentes en Angular
Un componente es uno de los principales bloques de construcción de Angular. Los componentes le permiten dividir diferentes secciones de su sitio web en partes más pequeñas y reutilizables. Puede convertir cualquier cosa en componentes, incluidos botones más pequeños, tarjetas, barras laterales más grandes y barras de navegación.
También puede usar variables de entrada para pasar datos a través de diferentes instancias del componente. Y puede enrutar al componente usando rutas URL.
Si está desarrollando una nueva aplicación Angular, es posible que deba crear una barra de navegación para que sus usuarios naveguen a través de sus componentes. Tener una barra de navegación receptiva le permite verlo en diferentes dispositivos, en diferentes tamaños de pantalla.
