html repetición dentro de la misma componente

votos
0

Estoy buscando una manera de repetir el mismo código en múltiples lugares en mi componente. Sé que sólo pudiera utilizar un nuevo componente, pero im buscando algo un poco menos grave.

el 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>

¿Hay una manera de utilizar ng-templaterepetir esta misma marca en varios lugares dentro del mismo componente ... Algo así como más adelante

<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>
Publicado el 27/11/2018 a las 16:48
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
1

Puede insertar el contenido de un ng-templatecon ng-containerelementos angulares y la ngTemplateOutlet Directiva.

<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>
Respondida el 27/11/2018 a las 16:58
fuente por usuario

votos
0

Crear un componente secundario que contiene su código HTML en su plantilla y utilizarlo tantas veces que necesita en su componente (padre), de este modo:

componente secundario:

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) {
  }

}

Componente de Padres:

<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>
Respondida el 27/11/2018 a las 17:05
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more