ホームページ > 記事 > ウェブフロントエンド > AngularでngForOfをコンポーネントに入力する方法
今回は、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" } ] }効果は次のようになります: ただし、私は子犬ListCmpが必要ですコンポーネント このように、データが変更されていない場合に子犬の名前と色のみを表示するなど、さまざまなニーズを満たすことができます: これがこの記事の焦点です。ユーザー定義のテンプレートを実装する必要があります。 今度はコンポーネントのテンプレートをハードコーディングせず、ユーザーが外部から入力できるようにします。まず、コンポーネント テンプレート:
<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 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
Baidu の BAE を通じて vue プロジェクトを公開する方法
axios http リクエストが vue2 で使用できない理由
以上がAngularでngForOfをコンポーネントに入力する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。