Angular Component Input ngForOf-Vorlagenmethodeninstanz

Jetzt schreiben wir eine Komponente puppiesListCmp, um eine Liste von Welpen anzuzeigen: In diesem Artikel wird hauptsächlich vorgestellt, wie Angular die Inhaltsprojektion verwendet, um die ngForOf-Vorlage in die Komponente einzugeben.

//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
}

Dann verwenden Sie es so:

//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"
  }
 ]
}

Der Effekt wird so sein:

Ich hoffe jedoch, dass unsere puppiesListCmp-Komponente unterschiedliche Anforderungen erfüllen kann, z. B. nur die Anzeige des Namens und der Farbe des Welpen, während die Daten unverändert bleiben, wie folgt:

Das ist der Schwerpunkt dieses Artikels. Wir müssen benutzerdefinierte Vorlagen implementieren!

Jetzt codieren wir die Komponentenvorlage nicht mehr fest, sondern lassen den Benutzer Eingaben von außen machen!

Zuerst unsere Komponentenvorlage:

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

ist äquivalent zu:

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

Dann verwenden Sie @ContentChild (über @ContentChild können Sie hier nachsehen, FQ ist erforderlich), um die Vorlage extern anzupassen (relativ zur puppiesListCmp-Komponente) und sie ngForTemplate zuzuweisen. Mit anderen Worten, dieser Teil:

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

ist nicht mehr wie zuvor in der Komponente fest codiert, sondern wird vom Benutzer in der übergeordneten Komponente angepasst und dann Verwenden Sie die Inhaltsprojektion von Angular, um in die puppiesListCmp-Komponente zu projizieren. So:

//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
}

Damit ist unsere Komponente komplett. Dann verwenden wir es:

//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>
`
})

Der Effekt ist immer noch derselbe:

Wenn wir einfach anzeigen Schreiben Sie einfach den Namen und die Farbe des Welpen wie folgt:

//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>
`
})

Der Effekt wird so sein:

Solche Komponenten sind sehr flexibel und können je nach gewünschtem Effekt angepasst werden, wodurch die Wiederverwendung von Komponenten realisiert wird.

Das obige ist der detaillierte Inhalt vonAngular Component Input ngForOf-Vorlagenmethodeninstanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!