집 > 기사 > 웹 프론트엔드 > Angular의 구성 요소에 ngForOf를 입력하는 방법

Angular의 구성 요소에 ngForOf를 입력하는 방법

php中世界最好的语言원래의: 2018-03-28 14:13:461450검색

이번에는 Angular가 컴포넌트에 ngForOf를 입력하는 방법을 보여드리겠습니다. Angular가 컴포넌트에 ngForOf를 입력할 때 notes가 무엇인지 살펴보겠습니다.

이제 강아지 목록을 표시하는 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의 경우). 여기에서 외부(puppiesListCmp 구성 요소와 관련된) 사용자 지정 템플릿을 가져와 ngForTemplate에 할당하려면 FQ가 필요합니다. 즉, 이 부분:

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

은 더 이상 이전처럼 컴포넌트에 하드 코딩되지 않고 상위 컴포넌트에서 사용자가 사용자 정의한 다음 Angular의 콘텐츠 프로젝션(Content Projection)을 사용하여 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>
`
})

효과는 다음과 같습니다.

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!