docs: corrige y cambia forma de expresión en el archivo top-ph5.md
This commit is contained in:
Daniel
Michael Prentice
parent
600af0a5f6
commit
a4909d6aa0
@ -1,19 +1,19 @@
|
|||||||
# Agregar navegación en la aplicación con enrutamiento
|
# 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*.
|
* Agregar una vista de *Panel de control*.
|
||||||
* Agregue la capacidad de navegar entre las vistas *Heroes* y *Dashboard*.
|
* 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, navega a una vista detallada del héroe seleccionado.
|
* 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, abre la vista detallada de un héroe en particular.
|
* Cuando los usuarios hacen clic en un *enlace profundo* en un correo electrónico, abrir la vista detallada de un héroe en particular.
|
||||||
|
|
||||||
<div class="alert is-helpful">
|
<div class="alert is-helpful">
|
||||||
|
|
||||||
Para ver la aplicación de ejemplo que describe esta página, consulte el<live-example></live-example>.
|
Para ver la aplicación de ejemplo que describe esta página, consulta el <live-example></live-example>.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
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:
|
||||||
|
|
||||||
<div class="lightbox">
|
<div class="lightbox">
|
||||||
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
|
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
|
||||||
@ -35,7 +35,7 @@ Utiliza el CLI para generarlo.
|
|||||||
<div class="alert is-helpful">
|
<div class="alert is-helpful">
|
||||||
|
|
||||||
`--flat` coloca el archivo en `src/app` en lugar de en su propia carpeta. <br>
|
`--flat` coloca el archivo en `src/app` en lugar de en su propia carpeta. <br>
|
||||||
`--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`.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
El archivo generado se ve así:
|
El archivo generado se ve así:
|
||||||
@ -43,23 +43,22 @@ El archivo generado se ve así:
|
|||||||
<code-example path="toh-pt5/src/app/app-routing.module.0.ts" header="src/app/app-routing.module.ts (generated)">
|
<code-example path="toh-pt5/src/app/app-routing.module.0.ts" header="src/app/app-routing.module.ts (generated)">
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
Reemplácelo con lo siguiente:
|
Reemplázalo con lo siguiente:
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/app-routing.module.1.ts" header="src/app/app-routing.module.ts (updated)">
|
<code-example path="toh-pt5/src/app/app-routing.module.1.ts" header="src/app/app-routing.module.ts (updated)">
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
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.
|
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
|
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.
|
||||||
parte más larga de `AppRoutingModule`. Las siguientes secciones explican el resto del `AppRoutingModule` con más detalle.
|
|
||||||
|
|
||||||
### Rutas
|
### Rutas
|
||||||
|
|
||||||
La siguiente parte del archivo es donde configura sus rutas.
|
La siguiente parte del archivo es donde configuras tus rutas.
|
||||||
*Rutas* le indican al enrutador qué vista mostrar cuando un usuario hace clic en un enlace o
|
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.
|
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`:
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts"
|
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts"
|
||||||
region="heroes-route">
|
region="heroes-route">
|
||||||
@ -68,7 +67,7 @@ Como `AppRoutingModule` ya importa `HeroesComponent`, puedes usarlo en la matriz
|
|||||||
Una `Ruta` típica de Angular tiene dos propiedades:
|
Una `Ruta` típica de Angular tiene dos propiedades:
|
||||||
|
|
||||||
* `path`: una cadena que coincide con la URL en la barra de direcciones del navegador.
|
* `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'`
|
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`.
|
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.
|
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
|
lo configura con las `rutas` en un solo paso llamando
|
||||||
`RouterModule.forRoot()`:
|
`RouterModule.forRoot()`:
|
||||||
|
|
||||||
@ -92,7 +91,7 @@ lo configura con las `rutas` en un solo paso llamando
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
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.
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts (exports array)" region="export-routermodule">
|
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts (exports array)" region="export-routermodule">
|
||||||
</code-example>
|
</code-example>
|
||||||
@ -111,13 +110,13 @@ El `<router-outlet>` le dice al enrutador dónde mostrar las vistas enrutadas.
|
|||||||
<div class="alert is-helpful">
|
<div class="alert is-helpful">
|
||||||
|
|
||||||
El `RouterOutlet` es una de las directivas del enrutador que estuvo disponible para el `AppComponent`
|
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`.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
#### Pruébalo
|
#### Pruébalo
|
||||||
|
|
||||||
Debería seguir ejecutando este comando CLI.
|
Deberías seguir ejecutando este comando CLI.
|
||||||
|
|
||||||
<code-example language="sh" class="code-shell">
|
<code-example language="sh" class="code-shell">
|
||||||
ng serve
|
ng serve
|
||||||
@ -130,14 +129,14 @@ La URL termina en `/`.
|
|||||||
La ruta de acceso a `HeroesComponent` es `/heroes`.
|
La ruta de acceso a `HeroesComponent` es `/heroes`.
|
||||||
|
|
||||||
Agrega `/heroes` a la URL en la barra de direcciones del navegador.
|
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}
|
{@a routerlink}
|
||||||
|
|
||||||
## Agregar un enlace de navegación (`routerLink`)
|
## Agregar un enlace de navegación (`routerLink`)
|
||||||
|
|
||||||
Idealmente, los usuarios deberían poder hacer clic en un enlace para navegar en lugar de
|
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 `<nav>` y, dentro de él, un elemento de ancla que, al hacer clic,
|
Agrega un elemento `<nav>` y, dentro de él, un elemento de ancla que, al hacer clic,
|
||||||
activa la navegación al `HeroesComponent`.
|
activa la navegación al `HeroesComponent`.
|
||||||
@ -160,7 +159,7 @@ La barra de direcciones se actualiza a `/heroes` y aparece la lista de héroes.
|
|||||||
|
|
||||||
<div class="alert is-helpful">
|
<div class="alert is-helpful">
|
||||||
|
|
||||||
Hace que este y los enlaces de navegación futuros se vean mejor agregando estilos CSS privados a `app.component.css`
|
Haz que este y los futuros enlaces de navegación se vean mejor agregando estilos CSS privados a `app.component.css`
|
||||||
como se indica en la [revisión final del código](#appcomponent) a continuación.
|
como se indica en la [revisión final del código](#appcomponent) a continuación.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -196,30 +195,30 @@ Reemplaza el contenido del archivo predeterminado en estos tres archivos de la s
|
|||||||
|
|
||||||
La _plantilla_ presenta una cuadrícula de enlaces de nombres de héroes.
|
La _plantilla_ presenta una cuadrícula de enlaces de nombres de héroes.
|
||||||
|
|
||||||
* El repetidor `* ngFor` crea tantos enlaces como hay en en el arreglo `heroes` del componente.
|
* El repetidor `*ngFor` crea tantos enlaces como hay en en el arreglo `heroes` del componente.
|
||||||
* Los enlaces están diseñados como bloques de colores por el `dashboard.component.css`.
|
* Los enlaces están diseñados como bloques de colores por el `dashboard.component.css`.
|
||||||
* Los enlaces no van a ninguna parte todavía, pero [lo harán en breve](#hero-details).
|
* Los enlaces no van a ninguna parte todavía, pero [lo harán en breve](#hero-details).
|
||||||
|
|
||||||
La _clase_ es similar a la clase `HeroesComponent`.
|
La _clase_ es similar a la clase `HeroesComponent`.
|
||||||
* Define una propiedad de matriz de héroes.
|
* Define una propiedad de arreglo de héroes.
|
||||||
* El constructor espera que Angular inyecte el `HeroService` en una propiedad privada de `heroService`.
|
* El constructor espera que Angular inyecte el `HeroService` en una propiedad privada de `heroService`.
|
||||||
* El gancho del ciclo de vida `ngOnInit()` llama a `getHeroes()`.
|
* El método del ciclo de vida `ngOnInit()` llama a `getHeroes()`.
|
||||||
|
|
||||||
Este `getHeroes()` devuelve la lista dividida de héroes en las posiciones 1 y 5, devolviendo solo cuatro de los mejores héroes (segundo, tercero, cuarto y quinto).
|
Este `getHeroes()` devuelve la lista dividida de héroes en las posiciones 1 y 5, devolviendo solo cuatro de los mejores héroes (segundo, tercero, cuarto y quinto).
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/dashboard/dashboard.component.ts" header="src/app/dashboard/dashboard.component.ts" region="getHeroes">
|
<code-example path="toh-pt5/src/app/dashboard/dashboard.component.ts" header="src/app/dashboard/dashboard.component.ts" region="getHeroes">
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
### Agregar la ruta del tablero(dashboard)
|
### Agregar la ruta del dashboard
|
||||||
|
|
||||||
Para navegar hasta el tablero, el enrutador necesita una ruta adecuada.
|
Para navegar hasta el dashboard, el enrutador necesita una ruta adecuada.
|
||||||
|
|
||||||
Importa el `DashboardComponent` en el `AppRoutingModule`.
|
Importa el `DashboardComponent` en el `AppRoutingModule`.
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/app-routing.module.ts" region="import-dashboard" header="src/app/app-routing.module.ts (import DashboardComponent)">
|
<code-example path="toh-pt5/src/app/app-routing.module.ts" region="import-dashboard" header="src/app/app-routing.module.ts (import DashboardComponent)">
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
Agrega una ruta a la matriz `AppRoutingModule.routes` que coincida con una ruta al `DashboardComponent`.
|
Agrega una ruta al arreglo `AppRoutingModule.routes` que coincida con una ruta al `DashboardComponent`.
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" region="dashboard-route">
|
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" region="dashboard-route">
|
||||||
</code-example>
|
</code-example>
|
||||||
@ -228,10 +227,10 @@ Agrega una ruta a la matriz `AppRoutingModule.routes` que coincida con una ruta
|
|||||||
|
|
||||||
Cuando se inicia la aplicación, la barra de direcciones del navegador apunta a la raíz del sitio web.
|
Cuando se inicia la aplicación, la barra de direcciones del navegador apunta a la raíz del sitio web.
|
||||||
Eso no coincide con ninguna ruta existente, por lo que el enrutador no navega a ninguna parte.
|
Eso no coincide con ninguna ruta existente, por lo que el enrutador no navega a ninguna parte.
|
||||||
El espacio debajo de `<router-outlet>` está en blanco.
|
El espacio debajo del `<router-outlet>` está en blanco.
|
||||||
|
|
||||||
Para que la aplicación navegue al panel de control automáticamente, agreaga la siguiente
|
Para que la aplicación navegue al dashboard automáticamente, agrega la siguiente
|
||||||
ruta a la matriz `AppRoutingModule.Routes`.
|
ruta al arreglo `rutas`.
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" region="redirect-route">
|
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" region="redirect-route">
|
||||||
</code-example>
|
</code-example>
|
||||||
@ -241,13 +240,13 @@ Esta ruta redirige una URL que coincide completamente con la ruta vacía a la ru
|
|||||||
Después de que el navegador se actualiza, el enrutador carga el `DashboardComponent`
|
Después de que el navegador se actualiza, el enrutador carga el `DashboardComponent`
|
||||||
y la barra de direcciones del navegador muestra la URL `/dashboard`.
|
y la barra de direcciones del navegador muestra la URL `/dashboard`.
|
||||||
|
|
||||||
### Agregar enlace del tablero al caparazón
|
### Agregar enlace del dashboard al caparazón
|
||||||
|
|
||||||
El usuario debe poder navegar hacia adelante y hacia atrás entre
|
El usuario debe poder navegar hacia adelante y hacia atrás entre
|
||||||
`DashboardComponent` y `HeroesComponent` haciendo clic en los enlaces en el
|
`DashboardComponent` y `HeroesComponent` haciendo clic en los enlaces en el
|
||||||
área de navegación cerca de la parte superior de la página.
|
área de navegación cerca de la parte superior de la página.
|
||||||
|
|
||||||
Agrega un enlace de navegación del panel de control a la plantilla de caparazón `AppComponent`, justo encima del enlace *Heroes*.
|
Agrega un enlace de navegación del panel de control a la plantilla de caparazón `AppComponent`, justo encima del enlace *Héroes*.
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/app.component.html" header="src/app/app.component.html">
|
<code-example path="toh-pt5/src/app/app.component.html" header="src/app/app.component.html">
|
||||||
</code-example>
|
</code-example>
|
||||||
@ -262,12 +261,12 @@ Por el momento, el `HeroDetailsComponent` solo es visible en la parte inferior d
|
|||||||
|
|
||||||
El usuario debería poder acceder a estos detalles de tres formas.
|
El usuario debería poder acceder a estos detalles de tres formas.
|
||||||
|
|
||||||
1. Haciendo clic en un héroe en el tablero.
|
1. Haciendo clic en un héroe en el dashboard.
|
||||||
1. Haciendo clic en un héroe de la lista de héroes.
|
1. Haciendo clic en un héroe de la lista de héroes.
|
||||||
1. Pegando una URL de "enlace profundo" en la barra de direcciones del navegador que identifica al héroe a mostrar.
|
1. Pegando una URL de "enlace profundo" en la barra de direcciones del navegador que identifica al héroe a mostrar.
|
||||||
|
|
||||||
En esta sección, habilitará la navegación al `HeroDetailsComponent`
|
En esta sección, habilitarás la navegación al `HeroDetailsComponent`
|
||||||
y libérelo del `HeroesComponent`.
|
y lo liberarás del `HeroesComponent`.
|
||||||
|
|
||||||
### Eliminar _detalles de héroe_ de `HeroesComponent`
|
### Eliminar _detalles de héroe_ de `HeroesComponent`
|
||||||
|
|
||||||
@ -277,21 +276,21 @@ reemplazando la vista de lista de héroes con la vista de detalles de héroe.
|
|||||||
La vista de lista de héroes ya no debería mostrar los detalles de los héroes como lo hace ahora.
|
La vista de lista de héroes ya no debería mostrar los detalles de los héroes como lo hace ahora.
|
||||||
|
|
||||||
Abre la plantilla `HeroesComponent` (`heroes/heroes.component.html`) y
|
Abre la plantilla `HeroesComponent` (`heroes/heroes.component.html`) y
|
||||||
elimine el elemento `<app-hero-detail>` de la parte inferior.
|
elimina el elemento `<app-hero-detail>` de la parte inferior.
|
||||||
|
|
||||||
Hacer clic en un elemento de héroe ahora no hace nada.
|
Al hacer clic en un elemento de héroe ahora no hace nada.
|
||||||
Lo [arreglará en breve](#heroes-component-links) después de habilitar el enrutamiento al `HeroDetailComponent`.
|
Lo [arreglarás en breve](#heroes-component-links) después de habilitar el enrutamiento al `HeroDetailComponent`.
|
||||||
|
|
||||||
### Agregar una ruta _detalle del héroe_
|
### Agregar una ruta _detalle del héroe_
|
||||||
|
|
||||||
Una URL como `~/detail/11` sería una buena URL para navegar a la vista *Hero Detail* del héroe cuyo `id` es `11`.
|
Una URL como `~/detail/11` sería una buena URL para navegar a la vista *Hero Detail* del héroe cuyo `id` es `11`.
|
||||||
|
|
||||||
Abre `AppRoutingModule` e importe `HeroDetailComponent`.
|
Abre `AppRoutingModule` e importa `HeroDetailComponent`.
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/app-routing.module.ts" region="import-herodetail" header="src/app/app-routing.module.ts (import HeroDetailComponent)">
|
<code-example path="toh-pt5/src/app/app-routing.module.ts" region="import-herodetail" header="src/app/app-routing.module.ts (import HeroDetailComponent)">
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
Luego, agrega una ruta _parametrizada_ a la matriz `AppRoutingModule.routes` que coincida con el patrón de ruta de la vista _detalle del héroe_.
|
Luego, agrega una ruta _parametrizada_ al arreglo de `rutas` que coincida con el patrón de ruta de la vista _detalle del héroe_.
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" region="detail-route">
|
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" region="detail-route">
|
||||||
</code-example>
|
</code-example>
|
||||||
@ -308,7 +307,7 @@ En este punto, todas las rutas de aplicación están en su lugar.
|
|||||||
Los enlaces de héroe `DashboardComponent` no hacen nada en este momento.
|
Los enlaces de héroe `DashboardComponent` no hacen nada en este momento.
|
||||||
|
|
||||||
Ahora que el enrutador tiene una ruta a `HeroDetailComponent`,
|
Ahora que el enrutador tiene una ruta a `HeroDetailComponent`,
|
||||||
Corrige los enlaces del héroe del tablero para navegar a través de la ruta del tablero _parameterized_.
|
corrige los enlaces del héroe del dashboard para navegar a través de la ruta _parametrizada_ del dashboard.
|
||||||
|
|
||||||
<code-example
|
<code-example
|
||||||
path="toh-pt5/src/app/dashboard/dashboard.component.html"
|
path="toh-pt5/src/app/dashboard/dashboard.component.html"
|
||||||
@ -323,13 +322,13 @@ para insertar el `hero.id` de la iteración actual en cada
|
|||||||
{@a heroes-component-links}
|
{@a heroes-component-links}
|
||||||
### Enlaces de héroe de `HeroesComponent`
|
### Enlaces de héroe de `HeroesComponent`
|
||||||
|
|
||||||
Los elementos de héroe en el `HeroesComponent` son elementos` <li> `cuyos eventos de clic
|
Los elementos de héroe en el `HeroesComponent` son elementos `<li>` cuyos eventos de clic
|
||||||
están vinculados al método `onSelect()` del componente.
|
están vinculados al método `onSelect()` del componente.
|
||||||
|
|
||||||
<code-example path="toh-pt4/src/app/heroes/heroes.component.html" region="list" header="src/app/heroes/heroes.component.html (list with onSelect)">
|
<code-example path="toh-pt4/src/app/heroes/heroes.component.html" region="list" header="src/app/heroes/heroes.component.html (list with onSelect)">
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
Quita el `<li>` de nuevo a su `* ngFor`,
|
Quita el `<li>` de nuevo a su `*ngFor`,
|
||||||
envuelve la insignia y el nombre en un elemento de anclaje (`<a>`),
|
envuelve la insignia y el nombre en un elemento de anclaje (`<a>`),
|
||||||
y agrega un atributo `routerLink` al ancla que
|
y agrega un atributo `routerLink` al ancla que
|
||||||
es el mismo que en la plantilla del panel
|
es el mismo que en la plantilla del panel
|
||||||
@ -338,7 +337,7 @@ es el mismo que en la plantilla del panel
|
|||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
Tendrás que arreglar la hoja de estilo privada (`heroes.component.css`) para hacer
|
Tendrás que arreglar la hoja de estilo privada (`heroes.component.css`) para hacer
|
||||||
la lista tiene el mismo aspecto que antes.
|
que la lista tenga el mismo aspecto que antes.
|
||||||
Los estilos revisados se encuentran en la [revisión final del código](#heroescomponent) al final de esta guía.
|
Los estilos revisados se encuentran en la [revisión final del código](#heroescomponent) al final de esta guía.
|
||||||
|
|
||||||
#### Eliminar código muerto (opcional)
|
#### Eliminar código muerto (opcional)
|
||||||
@ -354,8 +353,7 @@ Aquí está la clase después de podar el código muerto.
|
|||||||
|
|
||||||
## `HeroDetailComponent` enrutable
|
## `HeroDetailComponent` enrutable
|
||||||
|
|
||||||
Anteriormente, el padre `HeroesComponent` configuraba el `HeroDetailComponent.hero`
|
Anteriormente, el padre `HeroesComponent` configuraba la propiedad `HeroDetailComponent.hero` y el `HeroDetailComponent` mostraba el héroe.
|
||||||
propiedad y el `HeroDetailComponent` mostraba el héroe.
|
|
||||||
|
|
||||||
`HeroesComponent` ya no hace eso.
|
`HeroesComponent` ya no hace eso.
|
||||||
Ahora el enrutador crea el `HeroDetailComponent` en respuesta a una URL como `~/detail/11`.
|
Ahora el enrutador crea el `HeroDetailComponent` en respuesta a una URL como `~/detail/11`.
|
||||||
@ -363,8 +361,8 @@ Ahora el enrutador crea el `HeroDetailComponent` en respuesta a una URL como `~/
|
|||||||
El `HeroDetailComponent` necesita una nueva forma de obtener el héroe a mostrar.
|
El `HeroDetailComponent` necesita una nueva forma de obtener el héroe a mostrar.
|
||||||
Esta sección explica lo siguiente:
|
Esta sección explica lo siguiente:
|
||||||
|
|
||||||
* Obtén la ruta que lo creó
|
* Obtener la ruta que lo creó
|
||||||
* Extrae el `id` de la ruta
|
* Extraer el `id` de la ruta
|
||||||
* Adquirir el héroe con ese "id" del servidor a través de "HeroService"
|
* Adquirir el héroe con ese "id" del servidor a través de "HeroService"
|
||||||
|
|
||||||
Agrega las siguientes importaciones:
|
Agrega las siguientes importaciones:
|
||||||
@ -392,8 +390,8 @@ Lo usarás [más tarde](#goback) para volver a la vista que navegó aquí.
|
|||||||
|
|
||||||
### Extrae el parámetro de ruta `id`
|
### Extrae el parámetro de ruta `id`
|
||||||
|
|
||||||
En el `ngOnInit()` [gancho del ciclo de vida](guide/lifecycle-hooks#oninit)
|
En el `ngOnInit()` [método del ciclo de vida](guide/lifecycle-hooks#oninit)
|
||||||
llama a `getHero()` y defínalo de la siguiente manera.
|
llama a `getHero()` y defínelo de la siguiente manera.
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/hero-detail/hero-detail.component.ts" header="src/app/hero-detail/hero-detail.component.ts" region="ngOnInit">
|
<code-example path="toh-pt5/src/app/hero-detail/hero-detail.component.ts" header="src/app/hero-detail/hero-detail.component.ts" region="ngOnInit">
|
||||||
</code-example>
|
</code-example>
|
||||||
@ -409,11 +407,11 @@ que es lo que debería ser un "id" de héroe.
|
|||||||
|
|
||||||
El navegador se actualiza y la aplicación se bloquea con un error del compilador.
|
El navegador se actualiza y la aplicación se bloquea con un error del compilador.
|
||||||
`HeroService` no tiene un método `getHero()`.
|
`HeroService` no tiene un método `getHero()`.
|
||||||
Agréguelo ahora.
|
Agrégalo ahora.
|
||||||
|
|
||||||
### Agregar `HeroService.getHero ()`
|
### Agregar `HeroService.getHero()`
|
||||||
|
|
||||||
Abre `HeroService` y agrega el siguiente método `getHero()` con el `id` después del método `getHeroes ()`:
|
Abre `HeroService` y agrega el siguiente método `getHero()` con el `id` después del método `getHeroes()`:
|
||||||
|
|
||||||
<code-example path="toh-pt5/src/app/hero.service.ts" region="getHero" header="src/app/hero.service.ts (getHero)">
|
<code-example path="toh-pt5/src/app/hero.service.ts" region="getHero" header="src/app/hero.service.ts (getHero)">
|
||||||
</code-example>
|
</code-example>
|
||||||
@ -426,18 +424,18 @@ Ten en cuenta las comillas invertidas (`) que definen un JavaScript
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
Como [`getHeroes()`](tutorial/toh-pt4#observable-heroservice),
|
Como [`getHeroes()`](tutorial/toh-pt4#observable-heroservice),
|
||||||
`getHero()` tiene una firma asincrónica.
|
`getHero()` tiene una firma asincrónica.
|
||||||
Devuelve un _mock hero_ como un `Observable`, usando la función RxJS `of()`.
|
Devuelve un _mock hero_ como un `Observable`, usando la función RxJS `of()`.
|
||||||
|
|
||||||
Podrá volver a implementar `getHero()` como una solicitud real de `Http`
|
Podrás volver a implementar `getHero()` como una solicitud real de `Http`
|
||||||
sin tener que cambiar el `HeroDetailComponent` que lo llama.
|
sin tener que cambiar el `HeroDetailComponent` que lo llama.
|
||||||
|
|
||||||
#### Pruébalo
|
#### Pruébalo
|
||||||
|
|
||||||
El navegador se actualiza y la aplicación vuelve a funcionar.
|
El navegador se actualiza y la aplicación vuelve a funcionar.
|
||||||
Puedes hacer clic en un héroe en el tablero o en la lista de héroes y navegar hasta la vista de detalles de ese héroe.
|
Puedes hacer clic en un héroe en el dashboard o en la lista de héroes y navegar hasta la vista de detalles de ese héroe.
|
||||||
|
|
||||||
Si pega `localhost:4200/detail/11` en la barra de direcciones del navegador,
|
Si pegas `localhost:4200/detail/11` en la barra de direcciones del navegador,
|
||||||
el enrutador navega a la vista detallada del héroe con `id: 11`," Dr Nice ".
|
el enrutador navega a la vista detallada del héroe con `id: 11`," Dr Nice ".
|
||||||
|
|
||||||
{@a goback}
|
{@a goback}
|
||||||
@ -445,8 +443,8 @@ el enrutador navega a la vista detallada del héroe con `id: 11`," Dr Nice ".
|
|||||||
### Encuentra el camino de regreso
|
### Encuentra el camino de regreso
|
||||||
|
|
||||||
Al hacer clic en el botón Atrás del navegador,
|
Al hacer clic en el botón Atrás del navegador,
|
||||||
puede volver a la lista de héroes o la vista del panel,
|
puedes volver a la lista de héroes o la vista del panel,
|
||||||
dependiendo de cuál le envió a la vista detallada.
|
dependiendo de cuál te envió a la vista detallada.
|
||||||
|
|
||||||
Sería bueno tener un botón en la vista `HeroDetail` que pueda hacer eso.
|
Sería bueno tener un botón en la vista `HeroDetail` que pueda hacer eso.
|
||||||
|
|
||||||
@ -464,7 +462,7 @@ usando el servicio `Location` que [inyectaste previamente](#hero-detail-ctor).
|
|||||||
|
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
Actualiza el navegador y comience a hacer clic.
|
Actualiza el navegador y comienza a hacer clic.
|
||||||
Los usuarios pueden navegar por la aplicación, desde el panel hasta los detalles del héroe y viceversa,
|
Los usuarios pueden navegar por la aplicación, desde el panel hasta los detalles del héroe y viceversa,
|
||||||
de la lista de héroes al mini detalle a los detalles del héroe y de regreso a los héroes nuevamente.
|
de la lista de héroes al mini detalle a los detalles del héroe y de regreso a los héroes nuevamente.
|
||||||
|
|
||||||
@ -561,11 +559,11 @@ Aquí están los archivos de código discutidos en esta página.
|
|||||||
|
|
||||||
## Resumen
|
## Resumen
|
||||||
|
|
||||||
* Agregó el enrutador Angular para navegar entre diferentes componentes.
|
* Agregaste el enrutador Angular para navegar entre diferentes componentes.
|
||||||
* Convirtió el `AppComponent` en un caparazón de navegación con enlaces `<a>`y un `<router-outlet>`.
|
* Convertiste el `AppComponent` en un caparazón de navegación con enlaces `<a>`y un `<router-outlet>`.
|
||||||
* Configuró el enrutador en un `AppRoutingModule`
|
* Configuraste el enrutador en un `AppRoutingModule`
|
||||||
* Definió rutas simples, una ruta de redireccionamiento y una ruta parametrizada.
|
* Definiste rutas simples, una ruta de redireccionamiento y una ruta parametrizada.
|
||||||
* Usó la directiva `routerLink` en elementos de anclaje.
|
* Usaste la directiva `routerLink` en elementos de anclaje.
|
||||||
* Refactorizó una vista maestra/detallada estrechamente acoplada en una vista de detalle enrutada.
|
* Refactorizaste una vista maestra/detallada estrechamente acoplada en una vista de detalle enrutada.
|
||||||
* Usó parámetros de enlace del enrutador para navegar a la vista detallada de un héroe seleccionado por el usuario.
|
* Usaste parámetros de enlace del enrutador para navegar a la vista detallada de un héroe seleccionado por el usuario.
|
||||||
* Compartió el "HeroService" entre varios componentes.
|
* Compartiste el "HeroService" entre varios componentes.
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user