повторить HTML в том же компоненте

Я ищу способ повторить одну и ту же разметку в нескольких местах моего компонента. Я знаю, что мог бы просто использовать новый компонент, но я ищу что-то менее серьезное.

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>

angular ng-template
person Omar    schedule 27.11.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете вставить содержимое ng-template с ng-container элементами Angular и директивой ngTemplateOutlet.

<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>
person ConnorsFan    schedule 27.11.2018
comment
есть ли способ передать val в ng-template из ng-container? - person Omar; 27.11.2018
comment
Да, вы можете передавать значения в context ngTemplateOutlet. Я обновил ответ, чтобы показать это. Вы также можете увидеть его в работе в этом stackblitz. - person ConnorsFan; 27.11.2018

arrow_upward
0
arrow_downward

Создайте дочерний компонент, содержащий ваш 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>
person benshabatnoam    schedule 27.11.2018