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

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

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

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

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

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

효과는 다음과 같습니다.

하지만, 우리는 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 '@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
}

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

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

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

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

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

효과는 다음과 같습니다:

이러한 구성 요소는 매우 유연하며 원하는 효과로 사용자 정의할 수 있어 구성 요소의 재사용을 실현합니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 여러분에게 도움이 되기를 바랍니다.

관련 기사: uAngularjs Promise 예제 설명

Excel을 내보내는 Excel을 내보내는 5가지 방법이 자세히 설명되어 있습니다.

JavaScript 구현 파일을 로컬 메서드로

위 내용은 Angular를 통한 콘텐츠 프로젝션을 사용하여 ngForOf 템플릿을 구성 요소에 입력하는 단계는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!