一个文件中同一段html被多次用到怎么抽离

[deepthan]

一个文件中同一段html被多次用到怎么抽离

可以抽离成一个组件，也可以使用ngTemplateOutlet来实现共享

比如说有一段代码

<div> 
   第一区域
   <p>共享的部分</p>
</div>

<div> 
   第二区域
   <p>共享的部分</p>
</div>

如何将共享的部分抽离出来呢？

<div>
    第一区域
    <ng-container *ngTemplateOutlet="shared"></ng-container>
</div>

<div>
    第二区域
    <ng-container *ngTemplateOutlet="shared"></ng-container>
</div>

<ng-template #shared>
  <p>共享的部分</p>
</ng-template>

ngTemplateOutlet接收的是一个模板名称，即#shared,可以自定义。如果想传递参数请查看ngTemplateOutlet介绍。