Instance de méthode de modèle ngForOf d'entrée de composant angulaire

Maintenant, nous écrivons un composant puppiesListCmp pour afficher une liste de chiots : cet article présente principalement comment Angular utilise la projection de contenu pour saisir le modèle ngForOf dans le composant. J'espère que cela pourra vous aider.

//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 pourra répondre à différents besoins, comme afficher uniquement le nom et la couleur du chiot tandis que les données restent inchangées, comme ceci :

C'est l'objet 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 (à propos de @ContentChild, vous pouvez vérifier ici, FQ est requis) pour obtenir Personnalisez le modèle en externe (par rapport au composant puppiesListCmp) et attribuez-le à 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 personnalisée par l'utilisateur dans le composant parent, puis Utilisez la projection de contenu d'Angular pour 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 on juste afficher Écrivez simplement le nom et la couleur du chiot 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 sera comme ceci :

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

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!