Skip to content

Commit fbb6932

Browse files
stillstStanislav
andauthored
docs(ru): 52-lazy-load-component-translation (tomalaforge#993)
* docs(ru): 52-lazy-load-component-translation * docs(ru): add contributor --------- Co-authored-by: Stanislav <sgavrilov@hr-link.ru>
1 parent 0598111 commit fbb6932

File tree

1 file changed

+50
-0
lines changed

1 file changed

+50
-0
lines changed
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: 🟢 Ленивая загрузка компонента
3+
description: Испытание 52 посвящено изучению ленивой загрузки компонентов в Angular.
4+
author: lance-finney
5+
contributors:
6+
- LMFinney
7+
- stillst
8+
challengeNumber: 52
9+
command: angular-lazy-load-component
10+
sidebar:
11+
order: 21
12+
badge: Новое
13+
---
14+
15+
## Информация
16+
17+
В Angular уже давно существует механизм для ленивой загрузки модулей на основе маршрутов, но ленивая загрузка отдельных компонентов была намного сложнее. Это испытание посвящено изучению того, как лениво загружать компоненты при помощи новой фичи, которая появилась в Angular 17.
18+
19+
## Пояснение
20+
21+
Это простое приложение отображает `TopComponent`, который, по нашим предположениям, замедлил бы работу приложения, если бы был частью начального пакета (хотя на самом деле он содержит лишь немного текста, но мы притворяемся, что он замедляет приложение).
22+
23+
В текущем решении `PlaceholderComponent` отображается до тех пор, пока пользователь не нажмет кнопку для показа `TopComponent`. Однако, несмотря на то что `TopComponent` не виден до нажатия на кнопку, он все равно загружается вместе с начальным пакетом.
24+
25+
Используйте новую фичу Angular 17 для ленивой загрузки `TopComponent`, чтобы он загружался и отображался только после нажатия пользователем кнопки.
26+
27+
Когда вы закончите, вы увидите, что браузер загружает `TopComponent` в отдельном пакете после нажатия на кнопку для его отображения. В Chrome вы можете увидеть это, открыв DevTools, перейдя на вкладку "Network", и нажав кнопку для отображения `TopComponent`.
28+
29+
## Подсказки
30+
31+
<details>
32+
<summary>Подсказка 1</summary>
33+
34+
Вы должны иметь возможность удалить сигнал `topLoaded`, когда закончите.
35+
36+
</details>
37+
38+
<details>
39+
<summary>Подсказка 2</summary>
40+
41+
Новая фича Angular скроет `TopComponent` из вида, но он все равно будет загружаться в начальном пакете, если вы не измените способ определения `AppComponent`, и `TopComponent` в их декораторах. Эта задача начинается со старой архитектуры на основе `NgModule`, но вам нужно будет изменить ее, чтобы использовать новую фичу.
42+
43+
</details>
44+
45+
<details>
46+
<summary>Подсказка 3</summary>
47+
48+
Новая фича - это [Отложенные представления (Deferrable Views)](https://angular.dev/guide/defer). Фича предлагает несколько триггеров. Один из них идеально подходит для этой задачи.
49+
50+
</details>

0 commit comments

Comments
 (0)