Saltar al contenido

Angular guía para principiantes de enrutamiento (Tutorial) Jan, 10thIn este tutorial, vamos a aprender acerca de cómo agregar enrutamiento en …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo agregar encaminamiento en aplicaciones angulares utilizando un enrutador angular.

Contenido

  • Introducción
  • enrutamiento
  • router toma de
  • enlaces de navegación
  • estilos activos
  • Adición página 404
  • Url params
  • Acceso params datos
  • anidadas enrutamiento

¿Cuál es el router angular?

angular router es una biblioteca de enrutamiento creado por el equipo angular que se utiliza para añadir encaminamiento en aplicaciones angulares.

Introducción

Vamos a crear una nueva aplicación angular mediante el uso de la interfaz de línea de comandos angular.

Abrir el siguiente comando en el terminal y correr.

ng new angular-routing

Este comando anterior descargar los archivos relacionados con las aplicaciones angulares dentro de la carpeta de enrutamiento-angular.

Ahora cambiar el directorio de trabajo mediante la ejecución de comandos a continuación.

cd angular-routing

Nota: Si usted se pegó en cualquier parte de este tutorial a continuación repositorio de código de pago en GitHub

En la actualidad, nuestra aplicación tiene solamente un solo componente que necesitamos tres más componentes para crear el enrutamiento de modo thatwe están creando tres nuevos componentes.

ng generate component home
ng generate component users
ng generate component contact

ejecutar este por encima de los comandos en el terminal después de uno al otro.

enrutamiento

Vamos a implementar el enrutamiento en nuestra aplicación angular.

Abrir el archivo de app.module.ts y sustituirlo por debajo de código.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { ContactComponent } from './contact/contact.component';

const appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'users', component: UsersComponent }, { path: 'contact', component: ContactComponent }];
@NgModule({
declarations: [
AppComponent,
UsersComponent,
ContactComponent
],
imports: [ BrowserModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

En el código anterior, primero que importó RouterModule y Rutas de tipo de la angular / routerpackage continuación, creamos un array @ appRoutes.

Dentro de esa gama, tenemos que pasar un objeto con la ruta y el componente. ruta

: Aquí tenemos que añadir a los usuarios ejemplo, PATH o contacto. componente

: necesidades de componentes que para ser cargados cuando vaya a esa ruta.

En definitiva necesidad que añadir método RouterModule.forRoot a las importaciones matriz con un argumento appRoutes con esta nuestra configuración de enrutamiento se ha completado.

router toma de corriente

routeroutlet es una directiva angular que se utiliza para registrar un lugar determinado dentro de nuestro componente para hacer las rutas.

Ahora abrir su archivo app.component.html y reemplazar con el código de abajo.

Ahora nos están diciendo angular para cargar las rutas en este lugar.

Ejecutar el servidor de desarrollo y abra su navegador verá `HomeComponent se representa en la pantalla.

Ahora bien, si se intenta introducir manualmente localhost: 4200 / usuarios se verán UsersComponent se representa.

enlaces de navegación

de difícil de navegar a distintas páginas de nuestra aplicación introduciendo manualmente las rutas de manera que estamos agregando enlaces de navegación a nuestra aplicación Ella.

abrir su archivo app.component.html y la actualización con código de abajo.

routerLink es una directiva angular que ayuda a añadir enlaces de navegación.

estilos activos

Al usar Directiva RouterLinkActive que son las rutas activas de peinado para que el usuario sabe actualmente qué página es la navegación en el sitio.

Añadir una clase CSS activa de archivo app.component.css.

.active{
color: #e4cf11;
background-color: #161414;
padding: 10px;
}

Ahora actualizar su archivo app.component.html

En la imagen anterior se ha visto que estamos en / ruta de los usuarios, pero tanto para el hogar y los usuarios están activos podemos resolver este problema mediante la adición de un [routerLinkOptions] Directiva con {exacta: true} de enlace Inicio.

Adición página 404

Una página 404 también se llama no se encontró la página que significa que si un usuario navega a un camino equivocado, que no se presenta en nuestra página web, nos están mostrando que una página no encontrada.

abrir el siguiente comando en el terminal y correr.

ng generate component notfound

Ahora tenemos que añadir un componente notfound en nuestro arsenal appRoutes presente en el interior app.module.ts archivo.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { ContactComponent } from './contact/contact.component';
import { NotfoundComponent } from '.
otfound
otfound.component';

const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users', component: UsersComponent },
{ path: 'contact', component: ContactComponent },
{ path: '**', component: NotfoundComponent }];

@NgModule({
declarations: [
AppComponent,
UsersComponent,
ContactComponent,
HomeComponent,
NotfoundComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

En el código anterior, hemos añadido {ruta: ‘**’, componente: NotfoundComponent} donde ** es un carácter comodín mediante la adición de este router angular entiende cada ruta no válida que necesito para hacer NotfoundComponent.

vamos a ver ahora introduciendo un camino equivocado.

Hemos cargado con éxito un componente userinfo en el siguiente apartado se están accediendo a ese parámetro, y pronunciarse en la pantalla.

Acceso params datos

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
@Component({
selector: 'app-userinfo',
templateUrl: './userinfo.component.html',
styleUrls: ['./userinfo.component.css']
})
export class UserinfoComponent implements OnInit {

userId: number; constructor(private route: ActivatedRoute) { }

ngOnInit() {
this.route.params.subscribe((params: Params) => { this.userId = params.id; });
}
}

En el código anterior, primero se importaron ActivatedRoute, Parámetros del paquete / enrutador @ angular.

ActivateRoute : Nos da datos de la ruta actualmente cargado. Método

Dentro ngOnInit estamos suscripción de los parametros y actualizar el ID de usuario con id cargado en ese momento.

params es un objeto que recibe actualmente utiliza params en esa ruta, en nuestro caso estamos añadido parámetro ID en nuestro camino para que podamos recibir el valor ID.

actualizar el archivo userinfo.component.html.

Currently loaded user id is : {{userId}}

¿Usted ha visto en la imagen de arriba tiene nuestra URL localhost: 4200 / usuarios / 22 y también id 22 se reproducen en la pantalla.

anidada enrutamiento

Significa que estamos creando rutas dentro de otras rutas.

actualización sus appRoutes gama dentro app.module.ts archivo

const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users', component: UsersComponent, children: [ //UserInfo component is rendered when /users/:id is matched { path: ':id', component: UserinfoComponent } ]
},
{ path: 'contact', component: ContactComponent },
{ path: '**', component: NotfoundComponent }
];

En el código anterior, hemos agregado matriz niños con rutas anidadas en nuestros usuarios component.so ese componente de información del usuario se hace dentro del componente del usuario cuando coincide con los usuarios /: carné de identidad.

Actualmente en nuestra aplicación tiene una sola raíz enrutador de salida que está presente dentro de AppComponent rutas anidadas tenemos que añadir otro router-salida en la que el componente que se añaden variedad niños.

En nuestro caso, estamos añadiendo enrutador de salida en el archivo HTML UsersComponent. repositorio

Users page