Angular component input ngForOf template method instance-JS Tutorial-php.cn

Angular component input ngForOf template method instance

小云云

Release： 2018-03-06 09:42:41

Original

1148 people have browsed it

Now, we write a component puppiesListCmp to display a list of puppies: This article mainly introduces how Angular uses content projection to input the ngForOf template into the component. I hope it can help you.

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

Copy after login

Then use it like this:

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

Copy after login

The effect will be like this:

However, I hope that our puppiesListCmp component can meet different needs, such as only displaying the name and color of the puppy while the data remains unchanged, like this:

This is the focus of this article. We need to implement user-defined templates!

Now we don’t hard-code the component template, but let the user input from the outside!

First, our component template:

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

Copy after login

is equivalent to:

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

Copy after login

Then, use @ContentChild (you can check here about @ContentChild, FQ is required) to get the external (relative For the puppiesListCmp component) customize the template and assign it to ngForTemplate. In other words, this part:

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

Copy after login

is no longer hard-coded in the component as before, but is customized by the user in the parent component and then uses Angular Content projection (Content Projection) is projected into the puppiesListCmp component. Just like this:

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

Copy after login

This way our component is complete. Then we use this:

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

Copy after login

The effect is still the same:

If we just display the puppy Just write the dog's name and color like this:

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

Copy after login

The effect is like this:

Such components are very flexible and can be customized to whatever effect you want, which realizes the reuse of components.

The above is the detailed content of Angular component input ngForOf template method instance. For more information, please follow other related articles on the PHP Chinese website!