# Agregar navegación en la aplicación con enrutamiento Hay nuevos requisitos para la aplicación Tour of Heroes: * Agregar una vista de *Panel de control*. * Agregue la capacidad de navegar entre las vistas *Heroes* y *Dashboard*. * Cuando los usuarios hacen clic en el nombre de un héroe en cualquiera de las vistas, navega a una vista detallada del héroe seleccionado. * Cuando los usuarios hacen clic en un *enlace profundo* en un correo electrónico, abre la vista detallada de un héroe en particular.
Para ver la aplicación de ejemplo que describe esta página, consulte el.
Cuando haya terminado, los usuarios podrán navegar por la aplicación de esta manera:
View navigations
## Agregar el `AppRoutingModule` En Angular, la mejor práctica es cargar y configurar el enrutador en un módulo de nivel superior separado que está dedicado al enrutamiento e importado por la raíz `AppModule`. Por convención, el nombre de la clase del módulo es `AppRoutingModule` y pertenece a `app-routing.module.ts` en la carpeta `src/app`. Utiliza el CLI para generarlo. ng generate module app-routing --flat --module=app
`--flat` coloca el archivo en `src/app` en lugar de en su propia carpeta.
`--module=app` le dice a la CLI que lo registre en la matriz de `importaciones` del `AppModule`.
El archivo generado se ve así: Reemplácelo con lo siguiente: Primero, `AppRoutingModule` importa `RouterModule` y `Routes` para que la aplicación pueda tener funcionalidad de enrutamiento. La siguiente importación, `HeroesComponent`, le dará al enrutador un lugar adonde ir una vez que configure las rutas. Ten en cuenta que las referencias de CommonModule y la matriz de declaraciones son innecesarias, por lo que no parte más larga de `AppRoutingModule`. Las siguientes secciones explican el resto del `AppRoutingModule` con más detalle. ### Rutas La siguiente parte del archivo es donde configura sus rutas. *Rutas* le indican al enrutador qué vista mostrar cuando un usuario hace clic en un enlace o pega una URL en la barra de direcciones del navegador. Como `AppRoutingModule` ya importa `HeroesComponent`, puedes usarlo en la matriz de `rutas`: Una `Ruta` típica de Angular tiene dos propiedades: * `path`: una cadena que coincide con la URL en la barra de direcciones del navegador. * `componet`: el componente que el enrutador debe crear al navegar a esta ruta. Esto le dice al enrutador que haga coincidir esa URL con `path: 'héroes'` y mostrar el `HeroesComponent` cuando la URL sea algo como `localhost:4200/heroes`. ### `RouterModule.forRoot()` Los metadatos `@NgModule` inicializan el enrutador y lo hacen escuchar los cambios de ubicación del navegador. La siguiente línea agrega el `RouterModule` a la matriz `AppRoutingModule` `importa` y lo configura con las `rutas` en un solo paso llamando `RouterModule.forRoot()`:
El método se llama `forRoot()` porque configura el enrutador en el nivel raíz de la aplicación. El método `forRoot()` proporciona los proveedores de servicios y las directivas necesarias para el enrutamiento, y realiza la navegación inicial basada en la URL del navegador actual.
A continuación, `AppRoutingModule` exporta `RouterModule` para que esté disponible en toda la aplicación. ## Agregar `RouterOutlet` Abre la plantilla `AppComponent` y reemplaza el elemento `` con un elemento ``. La plantilla `AppComponent` ya no necesita `` porque la aplicación solo mostrará el `HeroesComponent` cuando el usuario navegue hacia él. El `` le dice al enrutador dónde mostrar las vistas enrutadas.
El `RouterOutlet` es una de las directivas del enrutador que estuvo disponible para el `AppComponent` porque `AppModule` importa `AppRoutingModule` que exportó `RouterModule`. El comando `ng generate` que ejecutó al comienzo de este tutorial agregó esta importación debido a la marca `--module=app`. Si creó manualmente `app-routing.module.ts` o usó una herramienta que no sea la CLI para hacerlo, deberá importar `AppRoutingModule` a `app.module.ts` y agregarlo a las `importaciones` matriz del `NgModule`.
#### Pruébalo Debería seguir ejecutando este comando CLI. ng serve El navegador debería actualizar y mostrar el título de la aplicación, pero no la lista de héroes. Mira la barra de direcciones del navegador. La URL termina en `/`. La ruta de acceso a `HeroesComponent` es `/heroes`. Agrega `/heroes` a la URL en la barra de direcciones del navegador. Debería ver la vista maestra / detallada de héroes familiares. {@a routerlink} ## Agregar un enlace de navegación (`routerLink`) Idealmente, los usuarios deberían poder hacer clic en un enlace para navegar en lugar de que pegar una URL de ruta en la barra de direcciones. Agrega un elemento `