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

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

亚连

Libérer： 2018-06-01 11:54:41

original

1775 Les gens l'ont consulté

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: &#39;puppies-list&#39;,
 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
}

Copier après la connexion

Ensuite, utilisez-le comme ceci :

//app.component.ts
@Component({
 selector: &#39;my-app&#39;,
 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"
  }
 ]
}

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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 &#39;@angular/core&#39;;
import { NgForOfContext } from &#39;@angular/common&#39;;
@Component({
 selector: &#39;puppies-list&#39;,
 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
}

Copier après la connexion

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

//app.component.ts
@Component({
 selector: &#39;my-app&#39;,
 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>
`
})

Copier après la connexion

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: &#39;my-app&#39;,
 template: `
<puppies-list [puppies]="puppies">
 <ng-template let-puppy>
  <p>
   <span>{{puppy.name}}</span>
   <span>{{puppy.color}}</span>
  </p>
 </ng-template>
</puppies-list>
`
})

Copier après la connexion

L'effet est comme ceci :