Les déclencheurs de defer

Si les options par défaut de @defer sont déjà très utiles pour charger en lazy loading des parties de vos composants, vous pouvez quand même vouloir personnaliser davantage l'expérience de chargement différé.

Par défaut, le contenu différé se charge lorsque le navigateur est inactif. Vous pouvez toutefois personnaliser le moment de ce chargement en spécifiant un déclencheur. Cela vous permet de choisir le comportement de chargement le mieux adapté à votre composant.

Les vues différables proposent deux types de déclencheurs de chargement :

Déclencheur Description
on Une condition de déclenchement qui utilise un déclencheur de la liste des déclencheurs intégrés.
Par exemple : @defer (on viewport)
when Une condition sous forme d'expression, évaluée pour savoir si elle est truthy. Quand l'expression est truthy, le placeholder est remplacé par le contenu chargé en différé.
Par exemple : @defer (when customizedCondition)

Si la condition when est évaluée à false, le bloc defer ne revient pas au placeholder. Le remplacement est une opération unique.

Vous pouvez définir plusieurs déclencheurs d'événements à la fois : ces déclencheurs sont évalués comme des conditions OU.

  • Ex. : @defer (on viewport; on timer(2s))
  • Ex. : @defer (on viewport; when customizedCondition)

Dans cette activité, vous allez apprendre à utiliser les déclencheurs pour spécifier la condition de chargement des vues différables.

  1. Ajouter le déclencheur on hover

    Dans votre app.ts, ajoutez un déclencheur on hover au bloc @defer.

    @defer (on hover) {
  <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>
}

    Désormais, la page n'affiche la section des commentaires que lorsque vous survolez son placeholder.

  2. Ajouter un bouton « Show all comments »

    Modifiez ensuite le template pour inclure un bouton avec le libellé « Show all comments ». Ajoutez au bouton une variable de template nommée #showComments.

    <button type="button" #showComments>Show all comments</button>

@defer (on hover) {
  <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>
}

    Note : pour plus d'informations sur les variables de template, consultez la documentation.

  3. Ajouter le déclencheur on interaction

    Modifiez le bloc @defer du template pour utiliser le déclencheur on interaction. Passez la variable de template showComments en paramètre de interaction.

    <button type="button" #showComments>Show all comments</button>

@defer (on hover; on interaction(showComments)) {
  <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>
}

    Avec ces modifications, la page attend que l'une des conditions suivantes soit remplie avant d'afficher la section des commentaires :

    • L'utilisateur survole le placeholder de la section des commentaires
    • L'utilisateur clique sur le bouton « Show all comments »

    Vous pouvez recharger la page pour essayer différents déclencheurs d'affichage de la section des commentaires.

Pour en savoir plus, consultez la documentation Chargement différé avec @defer. Continuez à apprendre pour découvrir d'autres fonctionnalités d'Angular.