variable - change title angular 4

Plantilla Angular 2 como parámetro a componente

Question

Mi objetivo simplificado es crear un componente que sea una lista con plantilla de elementos. P.ej:

<list>item</list>

Aquí está mi código:

import {bootstrap} from ''angular2/platform/browser'';
import {Component} from ''angular2/core'';

@Component({
  selector: ''list'',
  template: `
    <ul>
      <li *ngFor="let i of items" >
        <ng-content></ng-content>
      </li>
    </ul>
  `
})
class List {
  items = [1, 2, 3];
}

@Component({
  selector: ''app'',
  directives: [List],
  template: ''<list>item</list>''
})
class App { }

bootstrap(App, []);

Resultado Esperado:

• ít
• ít
• ít

Resultado actual:

•
•
• ít

Answer 1

Así es como lo hice:

Uso:

<template #myTemplate let-item="item">
    <strong>Name: </strong> {{item.name}}<br>
    <strong>Id: </strong> {{item.id}}
</template>

<app-template-param [items]="items" [template]="myTemplate"></app-template-param>

Componente:

@Component({
   selector: ''app-template-param'',
   templateUrl: ''template-param.html''
})
export class TemplateParamComponent implements OnInit {
    @Input() items: Array<any>;
    @Input() template: TemplateRef<any>;
}

Componente HTML

<template #defaultTemplate let-item="item">
    <strong>{{item.name}}</strong>
</template>
<ul>
    <li *ngFor="let item of items">
        <template [ngTemplateOutlet]="template || defaultTemplate" [ngOutletContext]="{item: item}"></template>
    </li>
</ul>

Answer 2

Consideraría cambiar un poco el diseño. En lugar de insertar contenido entre <list> y </list> y hacer referencia a dicho contenido mediante ng-content en el componente List , crearía un componente que desempeña el papel de contenido (es decir, "repetir la plantilla con las variables locales aprobadas, por lo que cada elemento es diferente ") con las variables de entrada requeridas e inserte el Componente en la lista. En otras palabras, algo como esto.

ContentComponent

@Component({
  selector: ''my-content'',
  inputs: [''inputVar''],
  template: `<div>Item no. {{inputVar}}</div>`
})
export class MyContent { 
  inputVar: string;
}

Lista

@Component({
  selector: ''list'',
  directives: [MyContent],
  template: `
    <ul>
      <li *ngFor="let i of items" >
        <my-content [inputVar]="i"></my-content>
      </li>
    </ul>
  `
})
class List {
  items = [1, 2, 3];
}

Espero que ayude

Answer 3

Encontré 3 maneras de hacerlo

@Component({
   selector: ''dynamic-list'',
   template: ''<div *ngFor="#item of items" *ngForTemplate="itemTemplate"></div>''
})    
export class DynamicListComponent {

  @ContentChild(TemplateRef)
  public itemTemplate: TemplateRef;

  @Input()
  public items: number[];
}




<dynamic-list [items]="items">
  <div template="#item">
      Inline template item #: {{item}}
  </div>
</dynamic-list> 

salida:

Inline template item #: 1
Inline template item #: 2
Inline template item #: 3
Inline template item #: 4

plunker: https://plnkr.co/edit/ollxzUhka77wIXrJGA9t?p=preview

ver más https://github.com/ilio/ng2-dynamic-components/blob/master/README.md

Answer 4

PLUNKER

AFAI intentó <ng-content> no se puede enlazar repetidamente, pero puede pasar un item como entrada, como esto

import {Component} from ''angular2/core'';

@Component({
  selector: ''list'',
  inputs: [''htmlIN''],
  template: `
    <ul>
      <li *ngFor="#i of items" >
       {{i}} {{htmlIN}}
      </li>
    </ul>
  `
})
export class List {
  htmlIN: any;
  items = [1, 2, 3, 4];
}

@Component({
  selector: ''my-app'',
  directives: [List],
  template: `<list htmlIN="item"></list>`
})
export class App { 
  constructor(){

  }
}