如何在Angular中重用模板HTML块？

Question

让我们假设我们在文件中有html块:

<div id="text">Text</div>

我如何在同一个文件中重用下面的html代码,我的意思是这样的:

<re-use id="text"></re-use>

可能吗？

Answer 1

我想你想再次使用相同的html块.如果我理解正确,下面的代码应该有所帮助

<ng-template #MsgRef >
        {{ mycontent }}
</ng-template>

要在同一模板中重复使用上面的块,

 <ng-template [ngTemplateOutlet]="MsgRef"></ng-template> //reuse any number of times

Answer 2

创建新组件是最常见的方法，但是有时您只需要重复一些本地标记即可ng-template。

有趣的是，甚至可以传递上下文以使用数据绑定：

<ng-template #tplPerson let-person>
    <span class="person-id">{{person.id}}</span>
    <span class="person-alias" *ngIf="!!person.alias">"{{person.alias}}"</span>
    <span class="person-name">{{person.name}}</span>
</ng-template>

let-person如果没有值person，则$implicit使用实例化模板时设置为的值定义上下文变量：

<ng-template *ngTemplateOutlet="tplPerson; context: {$implicit: thePerson}"></ng-template>

请参阅NgTemplateOutlet文档中的更多选项。

Answer 3

我可能会迟到。虽然有一些答案，但我无法通过上述答案中描述的内容实现它，我仍然觉得有人可能需要一些指导。

任何答案中都没有明确定义的关键点。

1. 假设您有一个模板，其中绑定了一些值。所以你必须附加一个上下文对象才能使模板绑定工作。

<ng-template #invoicesTemplate let-paymentInvoices="paymentInvoices">
    ...
</ng-template>

请注意，模板的 let-anyVariableName 和“paymentInvoices”是您传递的类变量。

使用中

<ng-template *ngTemplateOutlet="invoicesTemplate; context: {paymentInvoices : paymentInvoices} "></ng-template>

2. 你必须先定义模板，然后在任何你想要的地方使用它。想想一个函数声明。但是除非你不调用函数，否则它不会有任何影响。

模板整体代码声明

<ng-template #invoicesTemplate let-paymentInvoices="paymentInvoices">
  <div class="row">
    <div class="col-sm-12">
      <div class="tags-group">
        <div class="tag" *ngFor="let invoice of paymentInvoices">
          <div class="tag-body">
            <span>{{invoice.invoiceNo }}</span>
            <span (click)="removeInvoice(invoice)"><i title="remove" >x</i></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>

调用/使用

<ng-template *ngTemplateOutlet="invoicesTemplate; context: {paymentInvoices : paymentInvoices} "></ng-template>

您可以随意使用它。

Answer 4

您可以使用angular创建自定义html标签，然后将该模块导入要使用这些自定义标签的模块中。然后，您将被允许在HTML页面中使用相同的标记。创建了一个小例子，也许可以帮助您理解？

https://stackblitz.com/edit/angular-stackoverflow