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

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

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

Answer 3

我可能迟到了聚会。虽然有一些答案，但是我无法用上述答案中的内容来实现。我仍然觉得有人可能需要一些指导。

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

请考虑您有一个绑定了一些值的模板。所以你必须附加一个上下文对象，以使模板绑定有效。

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

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

使用中

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

您必须先定义模板，然后在所需的任何地方使用它。想到函数声明。但是除非您不调用函数，否则它将不会有任何影响。

整体代码模板声明

<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

创建新组件是最常见的方法，但是有时您只需要重复一些本地标记，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 5

这可以借助自定义指令以更标准的方式完成，您可以找到更多详细信息https://www.digitalocean.com/community/tutorials/angular-reusable-components-ngtemplateoutlet

instruction.ts


@Directive({
  selector: '[cardItem]'
})
export class CardItemDirective {}

在component.ts

中

import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
import { CardItemDirective } from './card-item.directive';
import { ListItemDirective } from './list-item.directive';

@Component({
  selector: 'card-or-list-view',
  templateUrl: './card-or-list-view.component.html'
})
export class CardOrListViewComponent {

  @Input() items: any[] = [];

  @Input() mode: 'card' | 'list' = 'card';

  // Read in our structural directives as TemplateRefs
  @ContentChild(CardItemDirective, {read: TemplateRef}) cardItemTemplate;
  @ContentChild(ListItemDirective, {read: TemplateRef}) listItemTemplate;

}

在component.html

中

<ng-container *ngSwitchCase="'card'">
  <ng-container *ngFor="let item of items">
    <ng-container *ngTemplateOutlet="cardItemTemplate"></ng-container>
  </ng-container>
</ng-container>
<ul *ngSwitchCase="'list'">
  <li *ngFor="let item of items">
    <ng-container *ngTemplateOutlet="listItemTemplate"></ng-container>
  </li>
</ul>
</ng-container>

快乐编码：）

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

5 个答案: