Quelles sont les étapes pour saisir le modèle ngForOf dans le composant à l'aide de la projection de contenu via Angular ?

Cet article présente principalement comment Angular utilise la projection de contenu pour saisir le modèle ngForOf dans le composant. Maintenant, je le partage avec vous et lui donne une référence.

Maintenant, nous écrivons un composant puppiesListCmp pour afficher la liste des chiots :

//puppies-list.component.ts
@Component({
 selector: 'puppies-list',
 template: `
  <p *ngFor="let puppy of puppies">
   <span>{{puppy.name}}</span>
   <span>{{puppy.age}}</span>
   <span>{{puppy.color}}</span>
  </p>
`
})
export class puppiesListCmp{
 @Input() puppies: Puppy[];
}
interface Puppy {
 name: string,
 age: number,
 color: string
}

Ensuite, utilisez-le comme ceci :

//app.component.ts
@Component({
 selector: 'my-app',
 template: `
  <puppies-list [puppies]="puppies"></puppies-list>
`
})
export class App{
 puppies = [
  {
   name: "sam",
   age: 0.6,
   color: "yellow"
  },
  {
   name: "bingo",
   age: 1.5,
   color: "black"
  }
 ]
}

L'effet sera comme ceci :

Cependant, j'espère que notre composant puppiesListCmp peut Pour répondre à différents besoins, par exemple, seuls le nom et la couleur du chiot sont affichés lorsque les données restent inchangées, comme ceci :

C'est l'objectif de cet article. Nous devons implémenter des modèles définis par l'utilisateur !

Maintenant, nous ne codons pas en dur le modèle de composant, mais laissons l'utilisateur saisir de l'extérieur !

Tout d'abord, notre modèle de composant :

<p *ngFor="let puppy of puppies">
   <span>{{puppy.name}}</span>
   <span>{{puppy.age}}</span>
   <span>{{puppy.color}}</span>
</p>

est équivalent à :

<ng-template ngFor let-puppy [ngForOf]="puppies">
   <p>
    <span>{{puppy.name}}</span>
    <span>{{puppy.age}}</span>
    <span>{{puppy.color}}</span>
   </p>
</ng-template>

Ensuite, utilisez @ContentChild (voir @ContentChild pour plus d'informations Ici, FQ est requis pour obtenir le modèle personnalisé externe (par rapport au composant puppiesListCmp) et l'attribuer à ngForTemplate. Autrement dit, cette partie :

<p>
  <span>{{puppy.name}}</span>
  <span>{{puppy.age}}</span>
  <span>{{puppy.color}}</span>
</p>

n'est plus codée en dur dans le composant comme avant, mais est laissée à l'utilisateur dans le composant parent . Définissez-le, puis utilisez la projection de contenu d'Angular pour le projeter dans le composant puppiesListCmp. Comme ceci :

//puppies-list.component.ts
import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
import { NgForOfContext } from '@angular/common';
@Component({
 selector: 'puppies-list',
 template: `
<ng-template ngFor let-puppy [ngForOf]="puppies" [ngForTemplate]="tpl"></ng-template>
`
})
export class puppiesListCmp{
 @Input() puppies: Puppy[];
 @ContentChild(TemplateRef) tpl: TemplateRef<NgForOfContext<Puppy>>
}
interface Puppy {
 name: string,
 age: number,
 color: string
}

De cette façon notre composant est complet. Ensuite on l'utilise :

//app.component.ts
@Component({
 selector: 'my-app',
 template: `
<puppies-list [puppies]="puppies">
 <ng-template let-puppy>
  <p>
   <span>{{puppy.name}}</span>
   <span>{{puppy.age}}</span>
   <span>{{puppy.color}}</span>
  </p>
 </ng-template>
</puppies-list>
`
})

L'effet est toujours le même :

Si nous avons seulement besoin d'afficher le nom et la couleur du chiot, écrivez-le simplement comme ceci :

//app.component.ts
@Component({
 selector: 'my-app',
 template: `
<puppies-list [puppies]="puppies">
 <ng-template let-puppy>
  <p>
   <span>{{puppy.name}}</span>
   <span>{{puppy.color}}</span>
  </p>
 </ng-template>
</puppies-list>
`
})

L'effet est comme ceci :

Ces composants sont très flexibles et peuvent être personnalisés selon l'effet souhaité, ce qui permet la réutilisation des composants.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Explication détaillée des exemples d'Angularjs Promise

Explication détaillée de cinq façons d'exporter Excel à l'aide de JS

Implémentation JavaScript de l'écriture de fichiers dans une méthode locale

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!