Passer un modèle au composant dans Angular

Cet article présente principalement deux méthodes permettant à Angular de transmettre des modèles aux composants. La première méthode est <ng-content> la deuxième méthode est l'instruction NgTemplateOutlet et diverses méthodes d'utilisation peuvent s'y référer

J'écris actuellement un composant de sélecteur de date. Afin de répondre aux divers besoins qui pourraient survenir à l'avenir, je dois pouvoir personnaliser fortement le style du composant. Afin d'atteindre cet objectif, vous devez être en mesure de contrôler le contenu à afficher dans chaque grille de dates en dehors du composant de sélection de dates, comme le marquage des jours fériés. A ce stade, une partie du modèle du composant doit être fournie par l'appelant.

Dans React, cette exigence est assez simple. Il suffit d'implémenter une fonction comme date => Element Cependant, les modèles angulaires sont de purs modèles et nécessitent l'utilisation de certains concepts spécialisés pour réaliser cette fonction.

La première façon<ng-content>

<ng-content> pas été La documentation officielle n’a même pas d’espace réservé. Mais cela n'empêche pas notre utilisation. Des internautes étrangers enthousiastes ont résumé les caractéristiques et les fonctions de <ng-content>

Utilisation de base

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
</p>

Supposons que nous ayons le composant ci-dessus, puis appelons-le comme ceci :

<wrapper>
  <span> World </span>
</wrapper>

Ensuite, le résultat final du rendu sera comme ceci :

<p>
  hello
  <span> World </span>
</p>

Il semble qu'un remplacement très simple ait eu lieu, mais si plusieurs <ng-content> apparaissent dans le Wrapper, plusieurs La réponse est non. L'essence de <ng-content> est simplement de déplacer des éléments et ne créera pas automatiquement le modèle entrant, donc même si vous utilisez ngFor pour envelopper <ng-content> , il n'y aura pas beaucoup de Si des composants personnalisés sont transmis, ces composants ne seront instanciés qu’une seule fois.

Utilisation avancée

Bien sûr, si la fonction de <ng-content> n'est que celle-ci, ce serait trop inutile. Vous pouvez spécifier un sélecteur lors de l'utilisation de <ng-content>. , ce sélecteur peut capturer les éléments enfants directs correspondants. Par exemple :

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
  <hr/>
  <ng-content select="span"></ng-content>
</p>

puis utilisez-le comme ceci :

<wrapper>
  <span> World </span>
  2333
</wrapper>

Le résultat final du rendu sera comme ceci :

<p>
  hello
  2333
  <hr/>
  <span> World </span>
</p>

En plus du réglage la balise ng-content En plus de l'attribut select, vous pouvez également utiliser l'attribut ngProjectAs sur l'élément enfant. Cet attribut permet à cet élément d'être capturé par le ng-content spécifié dans l'élément parent. Par exemple :

<wrapper>
  <p ngProjectAs="span"> World </p>
  2333
</wrapper>

Cette fois, le modèle transmis devient un p, mais comme ngProjectAs est défini, "World" apparaîtra sous la ligne de séparation.

La deuxième méthode de commande NgTemplateOutlet

L'utilisation de ng-content peut en effet avoir pour effet de passer un template, mais il y a un effet très fatal Le problème est que les données ne peuvent pas être transmises au modèle entrant. Afin de transmettre des données dans le modèle entrant, vous devez utiliser la directive NgTemplateOutlet.

Utilisation de base

Cette commande peut être utilisée pour instancier un objet TemplateRef à un emplacement spécifié dans le modèle. En même temps, une donnée peut également être transmise. pendant le processus d’instanciation de l’objet. TemplateRef peut être créé via la balise ng-template. Par exemple :

@Component({
 selector: 'ng-template-outlet-example',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>

  <ng-template #name let-name="data"><span>Hello {{name}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
 myContext = {data: &#39;World&#39;};
}

ng-container est un élément virtuel sur cet élément, nous utilisons une directive NgTemplateOutlet, spécifiant ce qui suit à instancier. modèle nommé nom. Dans le même temps, l'objet myContext est transmis en tant que contexte de données instancié, donc "Hello World!" sera finalement affiché. Il convient de noter la manière d'obtenir le contexte des données transmises dans ng-template : let-variableName='key'.

Utilisation avancée

L'étape suivante consiste à implémenter les exigences mentionnées au début de cet article, en passant le modèle en dehors du composant. Prenons l'exemple ci-dessus comme exemple. Étant donné que le modèle doit être transmis en tant que sous-contenu du monde extérieur, nous devons capturer le modèle manuellement. Si nécessaire ici, nous devons utiliser ContentChild :

@Component({
 selector: 'wrapper',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
`
})
class NgTemplateOutletExample {
 @ContentChild(TemplateRef) name: TemplateRef<any>;
 myContext = {data: &#39;World&#39;};
}

.

C'est un changement si simple. Laissez nos composants accepter les modèles du monde extérieur. Essayons :

<wrapper>
  <ng-template let-value="data">
    <span>Hello {{value}}!</span>
  </ng-template>
</wrapper>

Ce qui précède est ce que j'ai compilé pour tout le monde. tout le monde dans le futur.

Articles connexes :

Comment modifier par lots des listes de radio liées dynamiquement dans vue.js

Utilisation des composants React Quelles sont les commandes pour transférer des composants Vue ?

Comment copier du contenu dans le presse-papiers en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!