Angular를 통한 콘텐츠 프로젝션을 사용하여 ngForOf 템플릿을 구성 요소에 입력하는 단계는 무엇입니까?-JS 튜토리얼-php.cn

Angular를 통한 콘텐츠 프로젝션을 사용하여 ngForOf 템플릿을 구성 요소에 입력하는 단계는 무엇입니까?

亚连

풀어 주다： 2018-06-01 11:54:41

원래의

1775명이 탐색했습니다.

이 글에서는 Angular가 컨텐츠 프로젝션을 사용하여 ngForOf 템플릿을 컴포넌트에 입력하는 방법을 주로 소개하고 참조하겠습니다.

이제 강아지 목록을 표시하는 puppiesListCmp 구성 요소를 작성합니다.

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

로그인 후 복사

그런 다음 다음과 같이 사용합니다.

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

로그인 후 복사

효과는 다음과 같습니다.

하지만, 우리는 puppiesListCmp 구성 요소가 다음과 같이 데이터가 변경되지 않은 경우 강아지의 이름과 색상만 표시하는 등 다양한 요구 사항을 충족할 수 있기를 바랍니다.

이것이 이 기사의 초점입니다. 사용자 정의 템플릿을 구현해야 합니다!

이제 구성 요소 템플릿을 하드 코딩하지 않고 사용자가 외부에서 입력하도록 합니다.

먼저 구성 요소 템플릿

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

로그인 후 복사

은

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

로그인 후 복사

과 동일합니다.

그런 다음 @ContentChild(@ContentChild에 대해 여기에서 확인할 수 있습니다. FQ가 필요함)를 사용하여 외부(puppiesListCmp 구성 요소 관련) 사용자 정의 템플릿을 가져와 ngForTemplate에 할당합니다. 즉, 이 부분:

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

로그인 후 복사

은 더 이상 이전처럼 컴포넌트에 하드 코딩되지 않고 상위 컴포넌트에서 사용자가 사용자 정의한 다음 Angular의 Content Projection을 사용하여 Go를 puppiesListCmp 컴포넌트 내부로 투영합니다. . 이렇게:

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

로그인 후 복사

이렇게 하면 구성 요소가 완성됩니다. 그런 다음 다음을 사용합니다.

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

로그인 후 복사

효과는 여전히 동일합니다.

강아지의 이름과 색상만 표시해야 한다면 다음과 같이 작성하세요.

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

로그인 후 복사

효과는 다음과 같습니다: