Was sind die Schritte, um die ngForOf-Vorlage mithilfe der Inhaltsprojektion über Angular in die Komponente einzugeben?-js-Tutorial-php.cn

Was sind die Schritte, um die ngForOf-Vorlage mithilfe der Inhaltsprojektion über Angular in die Komponente einzugeben?

亚连

Freigeben： 2018-06-01 11:54:41

Original

1775 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode von Angular vorgestellt, die die Inhaltsprojektion verwendet, um die ngForOf-Vorlage in Komponenten einzugeben. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Jetzt schreiben wir eine Komponente puppiesListCmp, um die Liste der Welpen anzuzeigen:

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

Nach dem Login kopieren

Dann verwenden wir es so:

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

Ich hoffe jedoch, dass unsere puppiesListCmp-Komponente unterschiedliche Anforderungen erfüllen kann Beispielsweise werden nur der Name und die Farbe des Welpen angezeigt, wenn die Daten unverändert bleiben, etwa so:

Dies 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Verwenden Sie dann @ContentChild (für @ContentChild können Sie dies überprüfen hier ist FQ erforderlich) ruft die externe (relativ zur puppiesListCmp-Komponente) benutzerdefinierte Vorlage ab und weist sie ngForTemplate zu. Mit anderen Worten, dieser Teil:

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

Nach dem Login kopieren

ist nicht mehr wie zuvor in der Komponente fest codiert, sondern wird vom Benutzer in der übergeordneten Komponente angepasst Verwenden Sie Angulars Content Projection, um es in die puppiesListCmp-Komponente zu projizieren. So:

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

Nach dem Login kopieren

Damit ist unsere Komponente komplett. Dann verwenden wir es:

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

Nach dem Login kopieren

Der Effekt ist immer noch derselbe:

If Um den Namen und die Farbe des Welpen anzuzeigen, schreiben Sie ihn einfach so:

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

Nach dem Login kopieren

Der Effekt ist so:

Solche Komponenten sind sehr flexibel und können an jeden gewünschten Effekt angepasst werden, wodurch die Wiederverwendung von Komponenten realisiert wird.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erklärung von Angularjs Promise-Beispielen

Detaillierte Erklärung von fünf Möglichkeiten, Excel mit JS zu exportieren

JavaScript-Implementierung zum Schreiben von Dateien in die lokale Methode

Das obige ist der detaillierte Inhalt vonWas sind die Schritte, um die ngForOf-Vorlage mithilfe der Inhaltsprojektion über Angular in die Komponente einzugeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!