在同一组件内重复 html
repeat html within the same component
我正在寻找一种在组件中的多个位置重复相同标记的方法。我知道我可以只使用一个新组件,但我正在寻找一些不那么严肃的东西。
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
在同一组件内的多个位置重复相同的标记...如下所示
<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 指令插入 ng-template
的内容。
<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 的子组件,并在您的(父)组件中根据需要多次使用它,如下所示:
子组件:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-child-comp',
template: `
<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>
`,
styleUrls: ['./child-comp.component.css']
})
export class ChildCompComponent implements OnInit {
@Input() pages;
constructor() { }
ngOnInit() {
}
onPageChange(index, event) {
}
}
父组件:
<div id="header">
<app-child-comp [pages]="pages"></app-child-comp>
</div>
<div id="content">...</div>
<div id="footer">
<app-child-comp [pages]="pages"></app-child-comp>
</div>
我正在寻找一种在组件中的多个位置重复相同标记的方法。我知道我可以只使用一个新组件,但我正在寻找一些不那么严肃的东西。
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
在同一组件内的多个位置重复相同的标记...如下所示
<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 指令插入 ng-template
的内容。
<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 的子组件,并在您的(父)组件中根据需要多次使用它,如下所示:
子组件:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-child-comp',
template: `
<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>
`,
styleUrls: ['./child-comp.component.css']
})
export class ChildCompComponent implements OnInit {
@Input() pages;
constructor() { }
ngOnInit() {
}
onPageChange(index, event) {
}
}
父组件:
<div id="header">
<app-child-comp [pages]="pages"></app-child-comp>
</div>
<div id="content">...</div>
<div id="footer">
<app-child-comp [pages]="pages"></app-child-comp>
</div>