Configuración de enrutamiento básico en Angular

Ahora configuremos el enrutamiento. Hagamos que si en la barra de direcciones del navegador se ingresa la URL /aaaa/, se muestre el primer componente, y si se ingresa /bbbb/, el segundo.

Esta configuración se realiza en el archivo app.routes.ts. Primero necesitamos importar nuestros componentes:

import { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

Y ahora necesitamos indicar qué URL corresponde a qué componente. Para esto necesitamos hacer un arreglo especial de objetos con rutas (routes). En cada objeto habrá una clave path, en la que se establece la URL (sin barras finales), y una clave component, en la que se establece el componente que se muestra en esta URL:

export const routes: Routes = [
	{ path: 'aaaa', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

La configuración de enrutamiento, sin embargo, no es suficiente. Necesitamos indicar en el componente padre el lugar donde se mostrarán nuestros componentes. Esto lo haremos en la siguiente lección.

Configure el enrutamiento en el archivo app.routes.ts.