What are the steps to input the ngForOf template to the component using content projection through Angular?-JS Tutorial-php.cn

What are the steps to input the ngForOf template to the component using content projection through Angular?

亚连

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

Original

1795 people have browsed it

This article mainly introduces the method of Angular using content projection to input the ngForOf template into the component. Now I share it with you and give it as a reference.

Now, we write a component puppiesListCmp to display a list of puppies:

//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 , for example, only the name and color of the puppy are displayed when 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 (about @ContentChild, you can view it here, FQ is required ) obtains the external (relative to the puppiesListCmp component) custom template and assigns 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. Then use Angular's Content Projection to project it into the puppiesListCmp component. 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 it:

//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 To display the puppy’s name and color, just write it 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 what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed explanation of Angularjs Promise examples

Detailed explanation of five methods of JS exporting Excel

JavaScript implements the method of writing files to local

The above is the detailed content of What are the steps to input the ngForOf template to the component using content projection through Angular?. For more information, please follow other related articles on the PHP Chinese website!