So geben Sie ngForOf in eine Komponente in Angular ein

Dieses Mal zeige ich Ihnen, wie Angular ngForOf in die Komponente eingibt. Welche Vorsichtsmaßnahmen es gibt, damit Angular ngForOf in die Komponente eingibt . Werfen wir einen Blick darauf.

Jetzt schreiben wir eine Komponente WelpenListeCmp, um eine Liste von Welpen anzuzeigen:

//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 wie folgt:

//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 ist wie folgt:

Ich hoffe jedoch, dass unsere puppiesListCmp-Komponente unterschiedliche Anforderungen erfüllen kann, z. B. die Anzeige von Welpen nur, wenn der Name und die Farbe der Daten unverändert bleiben , etwa so:

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!

Erstens ist unsere Komponentenvorlage:

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

gleichwertig zu:

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

Verwenden Sie dann @ContentChild (Sie können hier nachschauen, ob @ContentChild verfügbar ist, FQ ist erforderlich), um die externe (relativ zur puppiesListCmp-Komponente) benutzerdefinierte Vorlage abzurufen 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 bisher fest in der Komponente codiert, sondern wird vom Benutzer in der übergeordneten Komponente angepasst und verwendet dann Angulars Content Projection, projiziert in die puppiesListCmp Komponente. 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 nur den Namen und die Farbe des Welpen anzeigen möchten, Schreiben Sie einfach so: Ok:

//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 ist so:

Solche Komponenten sind sehr flexibel und können an jeden gewünschten Effekt angepasst werden . Wiederverwendung von Komponenten implementiert.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So veröffentlichen Sie ein Vue-Projekt über Baidus BAE

Warum Axios-HTTP-Anfragen nicht in vue2 verwendet werden können

Das obige ist der detaillierte Inhalt vonSo geben Sie ngForOf in eine Komponente in Angular ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!