Question

假设我有十个有角度的物体。

这就是我到目前为止所做的：

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>

ISSUE：

问题是，现在我正在重复很多代码，我想通过制作一个我可以简单地调用它的模板来清理它。

所以，假设我制作一个名为＆＃34; item_template.html＆＃34;的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

创建一个新组件，例如item-detail：

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>

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

1 个答案: