本文介绍了在同一组件中重复html的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一种在组件中的多个位置重复相同标记的方法.我知道我可以只使用一个新组件,但是我正在寻找不太严重的东西.
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元素和 ngTemplateOutlet 指令.
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
发布评论