이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Baidu의 BAE를 통해 vue 프로젝트를 게시하는 방법
vue2에서 axios http 요청을 사용할 수 없는 이유
위 내용은 Angular의 구성 요소에 ngForOf를 입력하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!