Внести вклад

Блоки @loading, @error и @placeholder

Откладываемые представления позволяют задать контент для разных состояний загрузки.

Блок Описание
@placeholder По умолчанию блоки defer не рендерят контент до срабатывания. @placeholder — необязательный блок, объявляющий контент до загрузки отложенного содержимого. Angular заменяет placeholder отложенным контентом после завершения загрузки. Блок необязателен, но команда Angular рекомендует всегда включать placeholder. Подробнее в полной документации по откладываемым представлениям
@loading Необязательный блок для контента, показываемого во время загрузки отложенных зависимостей.
@error Блок для контента, показываемого при сбое отложенной загрузки.

Содержимое всех этих подблоков загружается eagerly. Кроме того, некоторым возможностям нужен блок @placeholder.

В этом задании вы научитесь использовать блоки @loading, @error и @placeholder для управления состояниями откладываемых представлений.

  1. Add @placeholder block

    В app.ts добавьте блок @placeholder к блоку @defer.

    @defer {
  <article-comments />
} @placeholder {
  <p>Placeholder for comments</p>
}

  2. Configure the @placeholder block

    Блок @placeholder принимает необязательный параметр minimum — минимальное время показа placeholder. Параметр minimum задаётся в миллисекундах (ms) или секундах (s). Он нужен, чтобы избежать быстрого мерцания placeholder, если отложенные зависимости загружаются очень быстро.

    @defer {
  <article-comments />
} @placeholder (minimum 1s) {
  <p>Placeholder for comments</p>
}

  3. Add @loading block

    Далее добавьте блок @loading в шаблон компонента.

    Блок @loading принимает два необязательных параметра:

    • minimum: время, в течение которого блок должен отображаться
    • after: время ожидания после начала загрузки перед показом шаблона загрузки

    Оба параметра задаются в миллисекундах (ms) или секундах (s).

    Обновите app.ts: добавьте блок @loading с параметром minimum 1s и параметром after со значением 500ms.

    @defer {
  <article-comments />
} @placeholder (minimum 1s) {
  <p>Placeholder for comments</p>
} @loading (minimum 1s; after 500ms) {
  <p>Loading comments...</p>
}

    ПРИМЕЧАНИЕ: в этом примере используются два параметра, разделённые символом ;.

  4. Add @error block

    Наконец, добавьте блок @error к блоку @defer.

    @defer {
  <article-comments />
} @placeholder (minimum 1s) {
  <p>Placeholder for comments</p>
} @loading (minimum 1s; after 500ms) {
  <p>Loading comments...</p>
} @error {
  <p>Failed to load comments</p>
}

Поздравляем! Теперь у вас хорошее понимание откладываемых представлений. Продолжайте в том же духе — дальше разберём триггеры.