Angular Basics : Projection de contenu multi-emplacements

Aujourd’hui, nous allons examiner le concept de projection de contenu dans Angular et comment commencer à l’utiliser avec plusieurs sources.

Mise en œuvre de la projection de contenu

Nous avons examiné une introduction à la projection de contenu dans un article précédent et il existe trois façons d’implémenter la projection de contenu dans Angular, selon les Docs :

• Projection de contenu à un seul emplacement. Avec ce type de projection de contenu, un composant accepte le contenu d’une source unique.
• Projection de contenu multi-slots. Dans ce scénario, un composant accepte le contenu de plusieurs sources.
• Projection de contenu conditionnelle. Les composants qui utilisent la projection de contenu conditionnelle affichent le contenu uniquement lorsque des conditions spécifiques sont remplies.

Dans l’article d’aujourd’hui, nous examinerons projection de contenu multi-slots en angulaire.

Conditions préalables

Les développeurs de tous niveaux, des débutants aux experts, peuvent lire cet article. Peu importe si vous connaissez les concepts pour débutants dans Angular. Voici quelques éléments que vous devriez avoir pour pouvoir suivre la démonstration de cet article :

• Un environnement de développement intégré comme VS Code
• Node version 11.0 installé sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l’installation de Node)
• CLI angulaire version 8.0 ou supérieure
• Version angulaire 12 ou supérieure

D’autres avantages incluent :

• Connaissance pratique du framework Angular à un niveau débutant

Commencer

Nous allons configurer un projet Angular à l’aide de l’assistant de l’interface utilisateur de Kendo, puis illustrer le fonctionnement de ng-content avec l’implémentation à emplacement unique.

Ouvrez votre code VS et accédez à l’onglet Extensions et recherchez l’assistant de modèle d’interface utilisateur Kendo. Installez-le et rechargez votre application VS Code. Maintenant, vous avez l’assistant. Mettons-nous au travail!

Pour utiliser l’assistant dans l’application VS Code, accédez à la palette de commandes (appuyez sur Commande / Contrôle + Maj + P) et sélectionnez l’assistant de l’interface utilisateur de Kendo et il ouvrira une invite où vous pourrez nommer le projet et choisir l’emplacement sur votre machine à l’endroit où vous souhaitez qu’elle se trouve.

Après avoir spécifié cela, cliquez sur le bouton suivant et vous serez amené à une nouvelle invite qui vous demandera avec quel framework vous voulez construire.

Maintenant, votre application a été générée, juste comme ça. Ouvrez le projet dans VS Code et ouvrez un nouveau terminal et exécutez la commande ci-dessous pour installer tous les packages avec leurs dernières versions.

npm install

Une fois l’installation terminée, testons si tout est correct. Exécutez le serveur de développement Angular avec cette commande :

ng serve

Ouvrez votre navigateur pour http://localhost:4200/home et vous devriez le voir ressembler à ceci :

Implémentation multi-slots

Angular vous permet de projeter du contenu à partir de plusieurs sources. Cela signifie que vous pouvez avoir plus d’un ng-content tag dans votre composant et toujours projeter le contenu exactement comme vous le souhaitez. Commençons par un petit rappel !

Commençons par créer un nouveau composant :

ng generate component components/projected

Commençons maintenant par une projection de contenu unique. Dans le fichier component.html de votre application, remplacez le contenu par ce bloc de code :

<div class="content">
    <app-header>
        Hello world, I am projected!
    </app-header>
    <router-outlet></router-outlet>
</div>
<div class="footer">
    <app-footer></app-footer>
</div>

Vous pouvez voir le message d’accueil que nous avons dans la balise d’en-tête de l’application. Maintenant, pour le faire apparaître dans notre vue, ajoutez le ng-content au fichier HTML du composant d’en-tête comme ceci :

<div class="container-fluid">
<div class="d-flex border-bottom py-2">
    <div class="d-flex">
        <div class="project-name d-flex">
            <ng-content></ng-content>
        </div>
    </div>
    <div class="d-flex ml-auto nav">
    </div>
</div>
</div>

Maintenant, lorsque vous enregistrez tous les fichiers et exécutez la commande dev server, vous devriez le voir apparaître comme ceci :

Projeter plus de contenu

Essayons maintenant de projeter le même contenu et plus de contenu d’un autre composant. Dans le composant de l’application, introduisez le composant projeté comme ceci :

<div class="content">
    <app-header>
        Hello world, I am projected!
        <app-projected></app-projected>
    </app-header>
    <router-outlet></router-outlet>
</div>
<div class="footer">
    <app-footer></app-footer>
</div>

Nous avons maintenant à la fois le texte brut et un autre composant à l’intérieur de la balise d’en-tête. Comment pensez-vous que tout cela apparaîtrait dans la vue ?

Vous pouvez voir les projets angulaires à la fois du contenu au même endroit. Et si nous ajoutions un nouveau ng-content balise à l’intérieur du composant d’en-tête ?

<div class="container-fluid">
<div class="d-flex border-bottom py-2">
    <div class="d-flex">
        <div class="project-name d-flex">
            <ng-content></ng-content>
        </div>
    </div>
    <div class="d-flex ml-auto nav">
            <ng-content></ng-content>
    </div>
</div>
</div>

Angular fait quelque chose d’intéressant ici – il oublie le premier ng-content entièrement et agit sur le second.

Comment diriger la projection du contenu

Nous voyons qu’un nouveau défi est apparu : comment pouvons-nous dire à Angular de projeter différents contenus à différentes parties du composant ?

Utilisation du nom du composant

Vous pouvez spécifier le nom du composant afin qu’Angular sache exactement quel contenu projeter où.

<div class="container-fluid">
<div class="d-flex border-bottom py-2">
    <div class="d-flex">
        <div class="project-name d-flex">
            <ng-content></ng-content>
        </div>
    </div>
    <div class="d-flex ml-auto nav">
            <ng-content select="app-projected"></ng-content>
    </div>
</div>
</div>

Vous pouvez maintenant voir que nous disons explicitement à Angular d’utiliser le premier ng-content par défaut, mais utilisez le second uniquement pour le nom du composant app-projected.

Cela fonctionne comme prévu.

Utilisation des classes et des identifiants CSS

Vous pouvez également utiliser des classes CSS et des ID pour obtenir le même résultat.

<div class="content">
    <app-header>
        <div id="cars">
            Hello world, I am projected! 
        </div>
        <app-projected class="books"></app-projected>
    </app-header>
    <router-outlet></router-outlet>
</div>
<div class="footer">
    <app-footer></app-footer>
</div>

Nous avons ajouté un ID pour le texte et une classe pour le composant. Essayons maintenant d’obtenir le même résultat ci-dessus avec cette nouvelle configuration.

<div class="container-fluid">
<div class="d-flex border-bottom py-2">
    <div class="d-flex">
        <div class="project-name d-flex">
            <ng-content select="#cars"></ng-content>
        </div>
    </div>
    <div class="d-flex ml-auto nav">
            <ng-content select=".books"></ng-content>
    </div>
</div>
</div>

Vous pouvez enregistrer tous les fichiers et voir que nous avons obtenu le résultat attendu.

Voici comment utiliser la projection de contenu multi-slots dans Angular.

Emballer

Nous avons examiné la projection de contenu multi-emplacements dans cet article et pourquoi cela peut être nécessaire. Nous avons également examiné comment l’implémenter avec divers exemples et différentes manières de spécifier le contenu à projeter. J’espère que vous commencerez à l’utiliser dans votre flux de travail à l’avenir. Bon piratage !