web-dev-qa-db-fra.com

Angular 2 Template en tant que paramètre du composant

Mon objectif simplifié est de construire un composant qui est une liste avec un modèle d'élément. Par exemple.:

<list>item</list>

Voici mon code:

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, []);

Résultat attendu:

  • article
  • article
  • article

Résultat actuel:

•
•
• article

angulartypescriptangular2-ngcontent
27
Dizzy

J'ai trouvé 3 façons de le faire

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

sortie:

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

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

voir plus https://github.com/ilio/ng2-dynamic-components/blob/master/README.md

14
IgorL

Voici comment je l'ai fait:

Usage:

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

Composant:

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

Composant 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>
27
RVandersteen

PLONGEUR

AFAI a essayé <ng-content> ne peut pas être lié à plusieurs reprises, mais vous pouvez passer item en entrée, comme ceci

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

  }
}
2
Ankit Singh

J'envisagerais de changer légèrement le design. Au lieu d'insérer du contenu entre <list> et </list> et référencer ce contenu via ng-content dans le composant List, je créerais un composant qui joue le rôle de contenu (c'est-à-dire "répéter le modèle avec des variables locales passées, donc chaque élément est différent") avec les variables d'entrée requises et insérer le composant dans la liste. En d'autres termes, quelque chose comme ça

ContentComponent

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

Liste

@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];
}

J'espère que ça aide

0
Picci