From a4909d6aa0c3eb7156af834cf448228d3c679555 Mon Sep 17 00:00:00 2001 From: Daniel Date: Sun, 7 Feb 2021 23:32:20 -0600 Subject: [PATCH] =?UTF-8?q?docs:=20corrige=20y=20cambia=20forma=20de=20exp?= =?UTF-8?q?resi=C3=B3n=20en=20el=20archivo=20top-ph5.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aio/content/tutorial/toh-pt5.md | 134 ++++++++++++++++---------------- 1 file changed, 66 insertions(+), 68 deletions(-) diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md index 8bfbe96faa..0671593c4b 100644 --- a/aio/content/tutorial/toh-pt5.md +++ b/aio/content/tutorial/toh-pt5.md @@ -1,19 +1,19 @@ # Agregar navegación en la aplicación con enrutamiento -Hay nuevos requisitos para la aplicación Tour of Heroes: +Hay nuevos requisitos para la aplicación Tour de Héroes: * 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. +* Agregar la capacidad de navegar entre las vistas *Héroes* y *Dashboard*. +* Cuando los usuarios hacen clic en el nombre de un héroe en cualquiera de las vistas, navegar a una vista detallada del héroe seleccionado. +* Cuando los usuarios hacen clic en un *enlace profundo* en un correo electrónico, abrir la vista detallada de un héroe en particular.
- Para ver la aplicación de ejemplo que describe esta página, consulte el. + Para ver la aplicación de ejemplo que describe esta página, consulta el .
-Cuando haya terminado, los usuarios podrán navegar por la aplicación de esta manera: +Cuando hayas terminado, los usuarios podrán navegar por la aplicación de esta manera:
View navigations @@ -35,7 +35,7 @@ Utiliza el CLI para generarlo.
`--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`. +`--module=app` le dice a la CLI que lo registre en el arreglo de `importaciones` del `AppModule`.
El archivo generado se ve así: @@ -43,23 +43,22 @@ El archivo generado se ve así: -Reemplácelo con lo siguiente: +Reemplázalo 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. +Ten en cuenta que las referencias de CommonModule y el arreglo de declaraciones son innecesarias, por lo que ya no forman parte 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 +La siguiente parte del archivo es donde configuras tus rutas. +Las *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`: +Como `AppRoutingModule` ya importa `HeroesComponent`, puedes usarlo en el arreglo de `rutas`: @@ -68,7 +67,7 @@ Como `AppRoutingModule` ya importa `HeroesComponent`, puedes usarlo en la matriz 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. +* `component`: 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`. @@ -77,7 +76,7 @@ y mostrar el `HeroesComponent` cuando la URL sea algo como `localhost:4200/heroe 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 +La siguiente línea agrega el `RouterModule` al arreglo `AppRoutingModule` de `importartaciones` y lo configura con las `rutas` en un solo paso llamando `RouterModule.forRoot()`: @@ -92,7 +91,7 @@ lo configura con las `rutas` en un solo paso llamando
-A continuación, `AppRoutingModule` exporta `RouterModule` para que esté disponible en toda la aplicación. +A continuación, `AppRoutingModule` exporta el `RouterModule` para que esté disponible en toda la aplicación. @@ -111,13 +110,13 @@ 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`. +porque `AppModule` importa `AppRoutingModule` que exportó `RouterModule`. El comando `ng generate` que ejecutaste al comienzo de este tutorial agregó esta importación debido a la marca `--module=app`. Si creaste manualmente `app-routing.module.ts` o usaste una herramienta que no sea la CLI para hacerlo, deberás importar `AppRoutingModule` a `app.module.ts` y agregarlo al arreglo de `importaciones` del `NgModule`.
#### Pruébalo -Debería seguir ejecutando este comando CLI. +Deberías seguir ejecutando este comando CLI. ng serve @@ -130,14 +129,14 @@ 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. +Deberías ver la vista maestra / detalle de héroes. {@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. +pegar una URL de ruta en la barra de direcciones. Agrega un elemento `