时间戳

首页 > 解决方案 > 组件内的本地模板

angular - 组件内的本地模板

问题描述

在我的 Angular 模板上，我想显示两个人的联系信息：

<div>
  <div class="person-info">Person One Info</div>
     <div>John</div>    
     <div>778-999-0000</div>
     <div>john@web.com</div>
  <div>
  <div class="person-info">Person Two Info</div>
     <div>Jack</div>    
     <div>778-111-0000</div>
     <div>jack@web.com</div>
  <div>
</div>

显然标记中有重复，Angular中有没有办法我可以在我的组件内创建某种轻量级的本地模板，这样我就可以将上面的标记更改为

<person-info [name]="John" [phone]="123-456-7890" email="john@web.com"></person-ino> 
<person-info [name]="Jack" [phone]="125-476-2890" email="jack@web.com"></person-ino>

标签： angular

解决方案

是的，您可以使用<ng-template>. 在这里检查：https ://angular.io/guide/structural-directives#creating-template-fragments-with-ng-template

你可以像这样重构你的代码：

<div>
  <div *ngFor='let person of persons; let index=index'>
    <ng-container [ngTemplateOutlet]="person_info" [ngTemplateOutletContext]="{person:person, index:index}"></ng-container>
  </div>
</div>

<ng-template #person_info let-person='person' let-index='index'>
  <div class="person-info">Person {{index + 1}} Info</div>
  <div>{{person.name}}</div>
  <div>{{person.phone}}</div>
  <div>{{person.email}}</div>
</ng-template>

推荐阅读