ANG_FRONT

Capítulo 8.3. RoutingModule y router-outlet en Angular

Objetivo de la práctica

• Aprender a utilizar RoutingModule y router-outlet.
• Navegar mediante el objeto Router.
• Gestionar parámetros de consulta.

Duración aproximada

• 10 minutos.

Instrucciones

1. Creación del RoutingModule

• Para crear un RoutingModule en Angular, sigue estos pasos:

Importar el RouterModule y Routes:

• En un nuevo archivo llamado app-routing.module.ts, importar RouterModule y Routes desde @angular/router.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

1. Incluir el RoutingModule en el AppModule:

• Asegurarse de importar AppRoutingModule en la app.module.ts.

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    // tus componentes
  ],
  imports: [
    AppRoutingModule,
    // otros módulos
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• router-outlet

• El router-outlet es una directiva que actúa como un marcador de posición en la plantilla de la aplicación donde se renderizarán los componentes asociados a las rutas definidas en el RoutingModule. Cada vez que se navega a una ruta específica, Angular reemplaza el contenido del router-outlet con el componente correspondiente.

1. Uso de router-outlet.

• Agregar router-outlet en la plantilla:

• En la app.component.html, colocar el router-outlet donde quieras que aparezcan los componentes de las rutas:

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

1. Navegación entre rutas:

• Cuando el usuario hace clic en los enlaces del menú, Angular actualizará automáticamente el contenido dentro del router-outlet con el componente correspondiente, sin recargar la página.

• Parámetros de Ruta y router-outlet

• El router-outlet también puede trabajar con rutas que contienen parámetros. Por ejemplo, si tienes una ruta que muestra detalles de un usuario basado en su ID, puedes definirla así:

const routes: Routes = [
  { path: 'user/:id', component: UserDetailComponent },
];

Y en el router-outlet, Angular cargará UserDetailComponent cuando se navegue a /user/1, por ejemplo.