Angular：包含一个html模板作为整体的一部分

Question

假设我有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> 

然后，而不是显示所有10，我想只能显示偶数编号和奇数编号的项目如下：

<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> 

问题：

的问题是，现在我重复很多代码，我想通过一个模板，我可以只是简单的把它清理它。

所以，我们说，我让所谓的 “item_template.html” 为以下HTML模板：

item_template.html

<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> 

现在，我卡住了。我将如何将这个新模板合并到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>