Header Ads Widget

Ticker

6/recent/ticker-posts

Aprenda Ionic 5 / Angular: ¿qué es un componente y una página? y como usarlos?

 Los componentes son las construcciones básicas de Angular.

Un componente es una construcción independiente que encapsula el código del controlador, la vista y los estilos, y tiene entradas y salidas.

Una aplicación Ionic 5 / Angular es un grupo de componentes (un componente de la aplicación + componentes de la página) y proveedores organizados juntos usando módulos Angular.

Una aplicación Ionic 5 / Angular contiene un componente raíz o de aplicación y, opcionalmente, 1 o más componentes de página.

Aquí hay un ejemplo de un componente principal de la aplicación Ionic que se encuentra en el archivo src / app / app.component.ts :

import { Component } from '@angular/core';

@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = 'HomePage';

constructor(/*...*/) {
    /* ... */
}
}

Cómo crear un componente de página en Ionic 5 / Angular

Puede crear una página Ionic de dos maneras, sin la CLI o usándola con el generador de páginas CLI.

Comencemos por crear una página sin usar el generador CLI.

Después de generar su proyecto, busque la carpeta de páginas y luego cree una carpeta con el nombre de su página.

Digamos que quiero crear una página de inicio.

cd myProject/src/pages
mkdir home 

Luego cree tres archivos: home.ts, home.html y home.scss

  • home.ts contendrá el código TypeScript de nuestra página.
  • home.html contendrá el código HTML de nuestra vista de página.
  • home.scss contendrá estilos Sass de nuestra vista de página.

    toca home.ts toca home.html toca home.scss

Abra home.ts y agregue el siguiente código para crear una página:

import { Component } from '@angular/core';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    constructor() {

    }
}

Entonces, como puede ver, una página en Ionic 4 / Angular es solo un componente Angular que a su vez es una clase de TypeScript decorada con el decorador @Component importado de @ angular / core .

El componente / página obtiene la información sobre su vista utilizando templateUrl que apunta a una ruta de una página HTML. En este caso el home.htmlarchivo que reside en la misma carpeta.

En su lugar, puede proporcionar una plantilla en línea usando:

template : '<p>Hello HomePage</p>'

El selector es la etiqueta HTML personalizada que se puede usar para usar el componente dentro de otra vista HTML:

<page-home></page-home>

También podemos usarlo para diseñar el componente, dentro de home.scss:

page-home {
    background : #000;
}              

A continuación, abra home.html y agregue:

<ion-header>
<ion-navbar>
    <ion-title>
    Ionic 3 Tutorial
    </ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
    <p>Hello HomePage</p>
</ion-content>

Como puede ver, utilizamos diferentes etiquetas personalizadas específicas de Ionic o componentes de la interfaz de usuario para crear la interfaz de usuario de nuestra página de inicio. Los nombres de las etiquetas se explican por sí mismos.

¡Es decir! Ha creado una página Ionic 5 utilizando componentes y decoradores de Angular.

También puede utilizar el generador de páginas CLI de Ionic para crear páginas sobre la marcha sin repetir esta repetición cada vez.

Utilice su terminal para escribir:

ionic generate page HomePage 

Se creará una nueva página.

Cómo usar páginas en Ionic 5 / Angular

Utiliza las páginas para crear aplicaciones de dos formas:

  • Declarando e importando páginas cuando se inicia la aplicación.
  • Por páginas de carga diferida.

Así que continuemos con nuestra HomePage. Para poder usarlo, debe declararlo en src / app / app.module.ts

  • Empiece por importarlo
  • Luego agréguelo a las declaraciones y matrices entryComponents de su aplicación principal NgModule

import { HomePage } from '../pages/home/home';

@NgModule({
declarations: [
    MyApp,
    HomePage
    ],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage  
    ],
providers: [
    /* .... */
]
})
export class AppModule {}

Entonces puedes hacer esta página

  • La página raíz de su aplicación (de su componente principal de la aplicación).
  • Como parte de un sistema de pestañas.
  • La vista de un diálogo modal.
  • Una página normal a la que puede navegar desde otras páginas o menú.

También puede usar una página cargándola de forma diferida, lo cual es bueno para el rendimiento, porque la página solo se carga cuando la aplicación lo solicita.

Para cargar la HomePage de forma diferida, debe seguir estos pasos:

  • Primero cree un NgModule para HomePage
  • Decora HomePage con el decorador IonicPage
  • Luego, haga referencia a HomePage con una cadena 'HomePage'

Así que entra en src / pages / home y crea home.module.ts y luego agrega este código:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

@NgModule({
declarations: [
    HomePage,
],
imports: [
    IonicPageModule.forChild(HomePage),
],
exports: [
    HomePage
]
})
export class HomePageModule {}

A continuación, importe IonicPage ionic-angular y decore HomePage con él:

import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
    /* ... */

Ahora puede usar HomePage usando la cadena 'HomePage' sin la necesidad de importarla.

Conclusión

¡Eso es todo! Hemos visto cómo crear páginas y cómo usarlas dentro de una aplicación Ionic 5 / Angular.


Publicar un comentario

0 Comentarios