在同一组件中重复html [英] repeat html within the same component

问题描述

我正在寻找一种在组件中的多个位置重复相同标记的方法.我知道我可以只使用一个新组件，但是我正在寻找不太严重的东西.

I am looking for a way to repeat the same markup on multiple spots in my component. I know I could just use a new component but im looking for something a little less serious.

HTML

        <nav class="pages">
            <ul class="inline">
                <li 
                    *ngFor="let p of pages; let i = index;"
                    [ngClass]="{'active': page.current_page == i+1}"
                    (click)="onPageChange(i+1, $event)"
                >{{i+1}}</li>
            </ul>
        </nav>

有没有一种方法可以使用ng-template在同一组件中的多个位置重复进行相同的标记...类似以下内容

Is there a way to use ng-template to repeat this same mark up in multiple places within the same component... Something like below

<div id="header"> <ng-template [innHTML]="#pages"></ng-template> </div>
<div id="content">...</div>
<div id="footer"> <ng-template [innHTML]="#pages"></ng-template> </div>

<ng-container #pages>
    <ul class="inline">
        <li *ngFor="let p of pages; let i = index;" [ngClass]="{'active': page.current_page == i+1}" (click)="onPageChange(i+1, $event)">{{i+1}}</li>
    </ul>
</ng-container>

推荐答案

您可以使用ng-container Angular元素和

You can insert the content of an ng-template with ng-container Angular elements and the ngTemplateOutlet directive.

<div id="header">
  <ng-container *ngTemplateOutlet="pages; context: { text: 'value1' }"></ng-container>
</div>
<div id="content">...</div>
<div id="footer">
  <ng-container *ngTemplateOutlet="pages; context: { text: 'value2' }"></ng-container>
</div>

<ng-template #pages let-value="text">
  <div>The value is {{value}}</div>
  <ul class="inline">
    <li *ngFor="let p of pages; let i = index;" [ngClass]="{'active': page.current_page == i+1}" (click)="onPageChange(i+1, $event)">{{i+1}}</li>
  </ul>
</ng-template>

这篇关于在同一组件中重复html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！