Angular 6 - Componentes

La mayor parte del desarrollo con Angular 6 se realiza en los componentes. Los componentes son básicamente clases que interactúan con el archivo .html del componente, que se muestra en el navegador. Hemos visto la estructura del archivo en uno de nuestros capítulos anteriores. La estructura de archivos tiene el componente de la aplicación y consta de los siguientes archivos:

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

Los archivos anteriores se crearon de forma predeterminada cuando creamos un nuevo proyecto usando el comando angular-cli.

Si abres el app.module.ts archivo, tiene algunas bibliotecas que se importan y también un declarativo que se asigna al componente de la aplicación de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Las declaraciones incluyen la variable AppComponent, que ya hemos importado. Este se convierte en el componente principal.

Ahora, angular-cli tiene un comando para crear su propio componente. Sin embargo, el componente de la aplicación que se crea de forma predeterminada siempre será el principal y los siguientes componentes creados formarán los componentes secundarios.

Ejecutemos ahora el comando para crear el componente.

ng generate component new-cmp

Cuando ejecute el comando anterior en la línea de comando, recibirá el siguiente resultado:

D:\Node\Angular6App>ng generate component new-cmp
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes)
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)
UPDATE src/app/app.module.ts (398 bytes)

Ahora, si revisamos la estructura del archivo, obtendremos la nueva carpeta new-cmp creada en la carpeta src / app.

Los siguientes archivos se crean en la carpeta new-cmp:

new-cmp.component.css: se crea el archivo css para el nuevo componente.
new-cmp.component.html: se crea el archivo html.
new-cmp.component.spec.ts: se puede utilizar para pruebas unitarias.
new-cmp.component.ts: aquí podemos definir el módulo, las propiedades, etc.

Los cambios se agregan al archivo app.module.ts de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent // here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

los new-cmp.component.ts El archivo se genera de la siguiente manera:

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .
@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

Si ve el archivo new-cmp.component.ts anterior, crea una nueva clase llamada NewCmpComponent, que implementa OnInit.In, que tiene un constructor y un método llamado ngOnInit (). ngOnInit se llama de forma predeterminada cuando se ejecuta la clase.

Comprobemos cómo funciona el flujo. Ahora, el componente de la aplicación, que se crea de forma predeterminada, se convierte en el componente principal. Cualquier componente agregado posteriormente se convierte en el componente secundario.

Cuando accedemos a la URL en el http://localhost:4200/ navegador, primero ejecuta el archivo index.html que se muestra a continuación:

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 6 Application</title>
      <base href = "/">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

El anterior es el archivo html normal y no vemos nada impreso en el navegador. Eche un vistazo a la etiqueta en la sección del cuerpo.

<app-root></app-root>

Esta es la etiqueta raíz creada por Angular por defecto. Esta etiqueta tiene la referencia en elmain.ts archivo.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

AppModule se importa desde la aplicación del módulo principal principal, y lo mismo se le da al módulo bootstrap, que hace que se cargue la aplicación.

Veamos ahora el app.module.ts archivo -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

Aquí, el AppComponent es el nombre dado, es decir, la variable para almacenar la referencia del app. Component.tsy lo mismo se le da al bootstrap. Veamos ahora elapp.component.ts archivo.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
}

El núcleo angular se importa y se hace referencia como Componente y el mismo se usa en el Declarador como -

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

En la referencia del declarador al selector, templateUrl y styleUrlson dados. El selector aquí no es más que la etiqueta que se coloca en el archivo index.html que vimos arriba.

La clase AppComponent tiene una variable llamada título, que se muestra en el navegador.

los @Component usa templateUrl llamado app.component.html, que es el siguiente:

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

Tiene solo el código html y el título de la variable entre llaves. Se reemplaza con el valor, que está presente en elapp.component.tsarchivo. A esto se le llama vinculación. Discutiremos el concepto de vinculación en un capítulo posterior.

Ahora que hemos creado un nuevo componente llamado new-cmp. Lo mismo se incluye en elapp.module.ts archivo, cuando se ejecuta el comando para crear un nuevo componente.

app.module.ts tiene una referencia al nuevo componente creado.

Veamos ahora los nuevos archivos creados en new-cmp.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

Aquí también tenemos que importar el núcleo. La referencia del componente se usa en el declarador.

El declarador tiene el selector llamado app-new-cmp y el templateUrl y styleUrl.

El .html llamado new-cmp.component.html es como sigue -

<p>
   new-cmp works!
</p>

Como se vio arriba, tenemos el código html, es decir, la etiqueta p. El archivo de estilo está vacío ya que no necesitamos ningún estilo en este momento. Pero cuando ejecutamos el proyecto, no vemos nada relacionado con el nuevo componente que se muestra en el navegador. Ahora agreguemos algo y lo mismo se puede ver en el navegador más adelante.

El selector, es decir, app-new-cmp necesita ser agregado en el app.component .html archivo de la siguiente manera:

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<app-new-cmp></app-new-cmp>

Cuando el <app-new-cmp></app-new-cmp> se agrega la etiqueta, todo lo que está presente en el archivo .html del nuevo componente creado se mostrará en el navegador junto con los datos del componente principal.

Veamos el new component .html archivo y el new-cmp.component.ts archivo.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

En la clase, hemos agregado una variable llamada componente nuevo y el valor es "Entered in new component created".

La variable anterior está vinculada en el .new-cmp.component.html archivo de la siguiente manera:

<p>
   {{newcomponent}}
</p>
<p>
   new-cmp works!
</p>

Ahora que hemos incluido el <app-new-cmp></app-new-cmp> selector en el app. component .html que es el .html del componente principal, el contenido presente en el archivo .html del nuevo componente (new-cmp.component.html) se muestra en el navegador de la siguiente manera:

Del mismo modo, podemos crear componentes y vincularlos usando el selector en el app.component.html Presentar según nuestros requisitos.

↰ Previous page Next page ↱