You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A fully rendered Angular page may contain many different components, directives, and pipes. While certain parts of the page should be shown to the user immediately, there may be portions that can wait to display until later.
4
+
Angular's _deferrable views_, using the `@defer` syntax, can help you speed up your application by telling Angular to wait to download the JavaScript for the parts of the page that don't need to be shown right away.
5
+
6
+
In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
7
+
8
+
<hr>
9
+
10
+
<docs-workflow>
11
+
12
+
<docs-steptitle="Add a `@defer` block to a section of a template">
13
+
In your `app.ts`, wrap the `article-comments` component with a `@defer` block to defer load it.
14
+
15
+
<docs-codelanguage="angular-html">
16
+
@defer {
17
+
<article-comments />
18
+
}
19
+
</docs-code>
20
+
21
+
By default, `@defer` loads the `article-comments` component when the browser is idle.
22
+
23
+
In your browser's developer console, you can see that the `article-comments-component` lazy chunk file is loaded separately (The specific file names may change from run to run):
A fully rendered Angular page may contain many different components, directives, and pipes. While certain parts of the page should be shown to the user immediately, there may be portions that can wait to display until later.
4
-
Angular's _deferrable views_, using the `@defer` syntax, can help you speed up your application by telling Angular to wait to download the JavaScript for the parts of the page that don't need to be shown right away.
3
+
Una página Angular completamente renderizada puede contener muchos componentes, directivas y pipes diferentes. Si bien ciertas partes de la página deberían mostrarse al usuario de inmediato, puede haber porciones que pueden esperar para mostrarse hasta más tarde.
4
+
Las _vistas diferibles (deferrable views)_ de Angular, usando la sintaxis `@defer`, pueden ayudarte a acelerar tu aplicación indicándole a Angular que espere para descargar el JavaScript de las partes de la página que no necesitan mostrarse de inmediato.
5
5
6
-
In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
6
+
En esta actividad, aprenderás cómo usar vistas diferibles para cargar de forma diferida una sección de la plantilla de tu componente.
7
7
8
8
<hr>
9
9
10
10
<docs-workflow>
11
11
12
-
<docs-steptitle="Add a `@defer` block to a section of a template">
13
-
In your`app.ts`, wrap the `article-comments`component with a`@defer`block to defer load it.
12
+
<docs-steptitle="Agrega un bloque `@defer` a una sección de una plantilla">
13
+
En tu`app.ts`, envuelve el componente `article-comments`con un bloque`@defer`para cargarlo de forma diferida.
14
14
15
15
<docs-codelanguage="angular-html">
16
16
@defer {
17
17
<article-comments />
18
18
}
19
19
</docs-code>
20
20
21
-
By default, `@defer`loads the `article-comments`component when the browser is idle.
21
+
Por defecto, `@defer`carga el componente `article-comments`cuando el navegador está inactivo.
22
22
23
-
In your browser's developer console, you can see that the `article-comments-component`lazy chunk file is loaded separately (The specific file names may change from run to run):
23
+
En la consola de desarrollador de tu navegador, puedes ver que el archivo del chunk lazy `article-comments-component`se carga por separado (Los nombres de archivo específicos pueden cambiar de una ejecución a otra):
By default, defer blocks do not render any content before they are triggered. The <code>@placeholder</code> is an optional block that declares content to show before the deferred content loads. Angular replaces the placeholder with the deferred content after loading completes. While this block is optional, the Angular team recommends always including a placeholder.
<docs-steptitle="Configure the `@placeholder` block">
52
+
The `@placeholder` block accepts an optional parameter to specify the `minimum` amount of time that this placeholder should be shown. This `minimum` parameter is specified in time increments of milliseconds (ms) or seconds (s). This parameter exists to prevent fast flickering of placeholder content in the case that the deferred dependencies are fetched quickly.
Next add a `@loading` block to the component template.
65
+
66
+
The `@loading` block accepts two optional parameters:
67
+
68
+
-`minimum`: the amount of time that this block should be shown
69
+
-`after`: the amount of time to wait after loading begins before showing the loading template
70
+
71
+
Both parameters are specified in time increments of milliseconds (ms) or seconds (s).
72
+
73
+
Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` as well as an after parameter with the value 500ms to the @loading block.
By default, defer blocks do not render any content before they are triggered. The <code>@placeholder</code> is an optional block that declares content to show before the deferred content loads. Angular replaces the placeholder with the deferred content after loading completes. While this block is optional, the Angular team recommends always including a placeholder.
10
+
Por defecto, los bloques defer no renderizan ningún contenido antes de ser disparados. El bloque <code>@placeholder</code> es un bloque opcional que declara contenido para mostrar antes de que el contenido diferido se cargue. Angular reemplaza el placeholder con el contenido diferido después de que la carga se completa. Aunque este bloque es opcional, el equipo de Angular recomienda incluir siempre un placeholder.
Learn more in the full deferrable views documentation
12
+
Aprende más en la documentación completa de vistas diferibles
13
13
</a>
14
14
</td>
15
15
</tr>
16
16
<tr>
17
17
<td><code>@loading</code></td>
18
18
<td>
19
-
This optional block allows you to declare content to be shown during the loading of any deferred dependencies.
19
+
Este bloque opcional te permite declarar contenido que se mostrará durante la carga de cualquier dependencia diferida.
20
20
</td>
21
21
</tr>
22
22
<tr>
23
23
<td><code>@error</code></td>
24
24
<td>
25
-
This block allows you to declare content which is shown if deferred loading fails.
25
+
Este bloque te permite declarar contenido que se muestra si la carga diferida falla.
26
26
</td>
27
27
</tr>
28
28
</table>
29
29
</div>
30
30
31
-
The contents of all the above sub-blocks are eagerly loaded. Additionally, some features require a `@placeholder` block.
31
+
El contenido de todos los sub-bloques anteriores se carga de forma inmediata. Adicionalmente, algunas funcionalidades requieren un bloque `@placeholder`.
32
32
33
-
In this activity, you'll learn how to use the `@loading`, `@error`and`@placeholder`blocks to manage the states of deferrable views.
33
+
En esta actividad, aprenderás cómo usar los bloques `@loading`, `@error`y`@placeholder`para gestionar los estados de las vistas diferibles.
34
34
35
35
<hr>
36
36
37
37
<docs-workflow>
38
38
39
-
<docs-steptitle="Add `@placeholder` block">
40
-
In your`app.ts`, add a `@placeholder`block to the `@defer` block.
39
+
<docs-steptitle="Agrega un bloque `@placeholder`">
40
+
En tu`app.ts`, agrega un bloque `@placeholder`al bloque `@defer`.
@@ -48,8 +48,8 @@ In your `app.ts`, add a `@placeholder` block to the `@defer` block.
48
48
</docs-code>
49
49
</docs-step>
50
50
51
-
<docs-steptitle="Configure the `@placeholder` block">
52
-
The `@placeholder`block accepts an optional parameter to specify the `minimum`amount of time that this placeholder should be shown. This `minimum`parameter is specified in time increments of milliseconds (ms) or seconds (s). This parameter exists to prevent fast flickering of placeholder content in the case that the deferred dependencies are fetched quickly.
51
+
<docs-steptitle="Configura el bloque `@placeholder`">
52
+
El bloque `@placeholder`acepta un parámetro opcional para especificar la cantidad de tiempo `minimum`que este placeholder debe mostrarse. Este parámetro `minimum`se especifica en incrementos de tiempo de milisegundos (ms) o segundos (s). Este parámetro existe para evitar el parpadeo rápido del contenido del placeholder en caso de que las dependencias diferidas se obtengan rápidamente.
@@ -60,17 +60,17 @@ The `@placeholder` block accepts an optional parameter to specify the `minimum`
60
60
</docs-code>
61
61
</docs-step>
62
62
63
-
<docs-steptitle="Add `@loading` block">
64
-
Next add a `@loading`block to the component template.
63
+
<docs-steptitle="Agrega un bloque `@loading`">
64
+
A continuación, agrega un bloque `@loading`a la plantilla del componente.
65
65
66
-
The `@loading`block accepts two optional parameters:
66
+
El bloque `@loading`acepta dos parámetros opcionales:
67
67
68
-
-`minimum`: the amount of time that this block should be shown
69
-
-`after`: the amount of time to wait after loading begins before showing the loading template
68
+
-`minimum`: la cantidad de tiempo que este bloque debe mostrarse
69
+
-`after`: la cantidad de tiempo a esperar después de que comience la carga antes de mostrar la plantilla de carga
70
70
71
-
Both parameters are specified in time increments of milliseconds (ms) or seconds (s).
71
+
Ambos parámetros se especifican en incrementos de tiempo de milisegundos (ms) o segundos (s).
72
72
73
-
Update`app.ts`to include a `@loading`block with a minimum parameter of `1s`as well as an after parameter with the value 500ms to the @loading block.
73
+
Actualiza`app.ts`para incluir un bloque `@loading`con un parámetro minimum de `1s`así como un parámetro after con el valor 500ms para el bloque @loading.
@@ -103,4 +103,4 @@ Finally, add an `@error` block to the `@defer` block.
103
103
</docs-step>
104
104
</docs-workflow>
105
105
106
-
Congratulations! At this point, you have a good understanding about deferrable views. Keep up the great work and let's learn about triggers next.
106
+
¡Felicidades! En este punto, tienes un buen entendimiento sobre las vistas diferibles. Sigue con el excelente trabajo y aprendamos sobre los triggers a continuación.
0 commit comments