角：全体の一部としてhtmlテンプレートを含む

Question

私は角度のオブジェクトを10個持っているとしましょう。

、これは私がこれまで持っているものです：私が欲しい、すべての10を表示する代わりに、次に

main.TS

item_display(data){   
    this.items = data;  
}; 

main.htmlを

<div class="my_items" *ngFor="let item of items;"> 
    <div class="item_name">{{item[0]}}</div> 
    <div class="item_weight">{{item[1]}}</div> 
    <div class="item_height">{{item[2]}}</div> 
    <div class="item_color">{{item[3]}}</div> 
    <div class="item_width">{{item[4]}}</div> 
</div> 

偶数番号項目と奇数項目だけを別々に表示するには、次のようにします。

<div class="mysieiu" *ngFor="let item of items; let i = index"> 
    <div *ngIf="i % 2 == 0"> 
    Odd Number: 
     <div class="item_name">{{item[0]}}</div> 
     <div class="item_weight">{{item[1]}}</div> 
     <div class="item_height">{{item[2]}}</div> 
     <div class="item_color">{{item[3]}}</div> 
     <div class="item_width">{{item[4]}}</div> 
    </div> 
    <div *ngIf="i % 2 == 1"> 
    Even Number: 
     <div class="item_name">{{item[0]}}</div> 
     <div class="item_weight">{{item[1]}}</div> 
     <div class="item_height">{{item[2]}}</div> 
     <div class="item_color">{{item[3]}}</div> 
     <div class="item_width">{{item[4]}}</div> 
    </div>     
</div> 

ISSUE：

問題は、今私はコードの多くを繰り返していると私は、私は単にそれを呼び出すことができますテンプレートを作ることによって、これをクリーンアップすることです。今

<div class="item_name">{{item[0]}}</div> 
<div class="item_weight">{{item[1]}}</div> 
<div class="item_height">{{item[2]}}</div> 
<div class="item_color">{{item[3]}}</div> 
<div class="item_width">{{item[4]}}</div> 

item_template.html

、私はこだわっています：

ので、私は以下のように "item_template.html" と呼ばれるHTMLテンプレートを作るとしましょう。この新しいテンプレートをmain.htmlにどのように組み込むのですか？

Answer 1

例項目-詳細は、新しいコンポーネントを作成します。

import { Component, Input } from '@angular/core'; 

@Component(
    selector: 'item-detail', 
    template: ` 
    <div class="item_name">{{item[0]}}</div> 
    <div class="item_weight">{{item[1]}}</div> 
    <div class="item_height">{{item[2]}}</div> 
    <div class="item_color">{{item[3]}}</div> 
    <div class="item_width">{{item[4]}}</div> 
    ` 
) 
export class ItemDetailComponent { 
    @Input() item: Array<any>; 
} 

は、あなたのモジュールの宣言セクションでこのコンポーネントを登録します。あなたのメインHTMLでそれを消費する：

<div class="mysieiu" *ngFor="let item of items; let i = index"> 
    <div *ngIf="i % 2 == 0"> 
    Odd Number: 
     <item-detail [item]="item"></item-detail> 
    </div> 
    <div *ngIf="i % 2 == 1"> 
    Even Number: 
     <item-detail [item]="item"></item-detail> 
    </div>     
</div>