Si está creando una aplicación Angular con varias páginas, debe usar el enrutamiento para navegar entre ellas. Puede hacer esto creando una lista de rutas con una ruta para cada página en el módulo de enrutamiento.
Luego puede enrutar a otras páginas dentro de un archivo HTML usando una etiqueta de anclaje. También puede enrutar a otras páginas dentro de un archivo TypeScript, utilizando el método router.navigate().
Cómo crear una nueva página en una aplicación angular
Primero, cree una nueva aplicación Angular. También puede utilizar uno existente. Si no está familiarizado con cómo crear una nueva aplicación Angular, puede aprender sobre ella junto con otros conceptos introductorios utilizados en Angular.
-
Cree un nuevo componente en su aplicación Angular utilizando el ng generar componente dominio:
ng generar componente de inicio - Abre el src/app/home/home.component.html y reemplace el contenido actual con contenido nuevo.
<clase div="contenido">
<h2> Hogar </h2>
<pags>
Soy un fotógrafo que hace fotografía de bodas. ¡Mira mis proyectos!
</pags>
<clase div="tarjeta">
<h4> John & amy </h4>
<pags> Montañas Azules, Australia </pags>
</div>
<clase div="tarjeta">
<h4> ross & Rach </h4>
<pags> Jardines de Hunter Valley, Australia </pags>
</div>
</div> - Rellenar el src/app/home/home.component.css archivo con estilo para el contenido HTML.
.contenido {
altura de la línea: 2movimiento rápido del ojo;
tamaño de fuente: 1.2em;
}.tarjeta {
sombra de la caja: 0 4píxeles 8píxeles 0 rgb(0, 0, 0, 0.2);
ancho: 400píxeles;
relleno: 16píxeles;
margen: 24píxeles 0píxeles;
color de fondo: humo blanco;
Familia tipográfica: sans-serif;
} - Cree otro componente usando el ng generar componente comando en la terminal. Utilizará el nuevo componente como una página acerca de.
ng generar componente sobre - Abre el src/app/about/about.component.html y reemplace el contenido actual con contenido nuevo.
<clase div="contenido">
<h2> Sobre mí </h2>
<pags>
yo'm John, y me encanta tomar fotos. Hago fotos desde hace más de 25 años. Visítame en mis redes sociales:
</pags>
<un href=""> Facebook </a><hermano>
<un href=""> LinkedIn </a><hermano>
<un href=""> Instagram </a><hermano>
</div> - Rellenar el src/app/about/about.component.css archivo con estilo para el contenido HTML.
.contenido {
altura de la línea: 2movimiento rápido del ojo;
tamaño de fuente: 1.2em;
}
Cómo navegar entre las dos páginas
Puede usar el enrutamiento para navegar de una página a otra. Puede configurar esto en un archivo de enrutamiento. Este ejemplo tendrá un archivo de enrutamiento para toda la aplicación, ubicado en src/app/app-routing.módulo.ts.
- Si su aplicación aún no tiene el archivo del módulo de enrutamiento de aplicaciones, puede generar uno usando el ng generar módulo dominio. En una línea de comando o terminal, navegue a la carpeta raíz de la aplicación y ejecute el siguiente comando:
ng generar módulo app-routing --module app --flat - Esto creará un archivo app-routing.module.ts en su origen/aplicación carpeta.
- En la parte superior del archivo, agregue importaciones adicionales para los componentes Inicio y Acerca de. Asegúrese de importar también RouterModule y CommonModule; en última instancia, sus declaraciones de importación deberían verse así:
importar { Módulo común } de '@angular/común';
importar { Rutas, módulo de enrutador } de '@angular/enrutador';
importar { Componente de inicio } de './inicio/inicio.componente';
importar { Acerca del componente } de './sobre/sobre.componente'; - Debajo de las importaciones, agregue una nueva matriz de rutas para almacenar las rutas que usará al enrutar a cada página.
constante rutas: Rutas = [
{ sendero: '', componente: Componente de inicio},
{ sendero: 'sobre', componente: Acerca del componente }
]; - Reemplace el bloque NgModule con lo siguiente, que agrega RouterModule a la matriz de importaciones y exportaciones.
@MóduloNg({
declaraciones: [],
importaciones: [
módulo común,
RouterModule.forRoot (rutas)
],
exportaciones: [RouterModule]
}) - En el src/app/app.component.html archivo, elimine el contenido actual y agregue la etiqueta de salida del enrutador.
<clase div="envase">
<salida del enrutador></router-outlet>
</div>
Cómo navegar a la página nueva en un archivo HTML
Para navegar a una página dentro de un archivo HTML, use la etiqueta de anclaje. En el atributo href, agregue la ruta que especificó en la matriz de rutas.
- En el src/app/app.component.html archivo, agregue dos etiquetas de anclaje antes del contenedor div. Esto le permitirá navegar entre las páginas Inicio y Acerca de.
<clase div="barra de navegación">
<una clase ="Enlace" href="">Hogar</a>
<una clase ="Enlace" href="/about">Sobre</a>
</div> - Agregue un poco de estilo a la src/app/app.component.css expediente.
.envase {
margen: 48píxeles 35%;
Familia tipográfica: &citar;Arial&citar;, sans-serif;
monitor: flexionar;
dirección de flexión: columna;
alinear elementos: centro;
}.barra de navegación {
color de fondo: gris pizarra oscuro;
relleno: 30píxeles 50píxeles;
monitor: flexionar;
alinear elementos: centro;
Familia tipográfica: sans-serif;
}.Enlace:primero de tipo {
margen derecho: 32píxeles;
}.Enlace {
color: blanco;
decoración de texto: ninguna;
tamaño de fuente: 14punto;
peso de fuente: audaz;
} - Agregue algo de estilo al margen general de la página en src/estilos.css.
cuerpo {
margen: 0;
relleno: 0;
} - En un símbolo del sistema o terminal, navegue a la carpeta raíz de la aplicación Angular. Ejecute la aplicación usando el ng servir comando y espere a que termine de compilarse.
ng servir - En un navegador, escriba localhostURL en la barra de URL para ver su aplicación. Por defecto, esto suele ser http://localhost: 4200/.
- Su sitio web se cargará en la página de inicio.
- Puede navegar a la página Acerca de haciendo clic en el enlace Acerca de en la barra de navegación.
Cómo navegar a la página nueva en un archivo TypeScript
Hasta ahora, esta demostración utiliza enlaces HTML estándar para facilitar la navegación. Para navegar usando el archivo TypeScript en lugar del archivo HTML, puede usar enrutador.navegar().
- En el src/app/app.component.html archivo, elimine las etiquetas de anclaje y reemplácelas con etiquetas de botón. Estos botones tendrán un evento de clic que activa una función llamada clickButton(). Cuando llame a la función clickButton(), agregue la ruta de la ruta URL como argumento.
<clase de botón ="Enlace" (clic)="botón clic('')">Hogar</button>
<clase de botón ="Enlace" (clic)="botón clic('/about')">Sobre</button> - Agregue algo de estilo a los botones en el src/app/app.component.css expediente.
botón {
color de fondo: negro;
relleno: 4píxeles 8píxeles;
cursor: puntero;
} - en la parte superior de la src/app/app.component.ts archivo, importe el enrutador.
importar { Enrutador } de '@angular/enrutador'; - Agregue un nuevo constructor dentro de la clase AppComponent e inyecte el enrutador dentro de los parámetros.
constructor(enrutador privado: enrutador) {
} - Debajo del constructor, crea una nueva función llamada clickButton(), que navegará a la nueva página según la URL que pases.
clickButton (ruta: cadena) {
este.router.navigate([ruta]);
} - Vuelva a ejecutar el comando ng serve en el símbolo del sistema o terminal.
ng servir - Navegue a su sitio web en un navegador. El href ahora se reemplaza con dos botones.
- Haga clic en el Sobre botón. Se dirigirá a la página Acerca de.
Creación de varias páginas en una aplicación angular
Puede enrutar entre varias páginas dentro de una aplicación Angular mediante el enrutamiento. Si tiene componentes separados para cada página, puede configurar rutas para sus rutas dentro del módulo de enrutamiento.
Para navegar a otra página a través de un archivo HTML, use una etiqueta de anclaje con el atributo href como la ruta de enrutamiento a esa página. Para navegar a otra página a través de un archivo TypeScript, puede usar el método router.navigate().
Si está creando una aplicación Angular, puede utilizar directivas Angular. Estos le permiten usar sentencias if dinámicas, bucles for u otras operaciones lógicas dentro del archivo HTML de un componente.
