각도 구성 요소 입력 ngForOf 템플릿 메서드 인스턴스

이제 강아지 목록을 표시하는 puppiesListCmp 컴포넌트를 작성합니다. 이 기사에서는 주로 Angular가 콘텐츠 프로젝션을 사용하여 ngForOf 템플릿을 컴포넌트에 입력하는 방법을 소개합니다.

//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)을 사용하여 이를 프로젝션합니다. 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>
`
})

효과는 다음과 같습니다.

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

위 내용은 각도 구성 요소 입력 ngForOf 템플릿 메서드 인스턴스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!