Angular 2 Template als Parameter für die Komponente

Meine vereinfachte Ziel ist der Aufbau einer Komponente, die eine Liste mit item-template. E. g.:

<list>item</list>

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

Erwartete Ergebnis:

  • Element
  • Element
  • Element

Tatsächliches Ergebnis:

•
•
• item

InformationsquelleAutor der Frage Dizzy | 2016-04-29

  1. 13

    Fand ich 3 Möglichkeiten, es zu tun

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

    Ausgabe:

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

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

    mehr sehen https://github.com/ilio/ng2-dynamic-components/blob/master/README.md

    InformationsquelleAutor der Antwort IgorL

  2. 18

    Dies ist, wie ich es gemacht habe:

    Verwendung:

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

    Komponente:

    export class TemplateParamComponent implements OnInit {
    @Input() items: Array<any>;
    @Input() template: TemplateRef<any>;
}

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

    InformationsquelleAutor der Antwort RVandersteen

  3. 2

    PLUNKER

    AFAI versucht <ng-content> können nicht gebundenen wiederholt, aber Sie können passieren item als Eingabe, wie dies

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

  }
}

    InformationsquelleAutor der Antwort Ankit Singh

  4. 0

    Ich würde in Erwägung ziehen, etwas das design. Anstelle von einfügen von Inhalten zwischen <list> und </list> - und Referenz-solcher Inhalte über ng-content im List Komponente, ich möchte eine Komponente erstellen, die die Rolle spielt, die der Inhalt (d.h. "wiederholen Sie die Vorlage mit lokalen Variablen übergeben, so wird jedes Element ist anders") mit den erforderlichen input-Variablen und einfügen der Komponente in der Liste aus. In anderen Worten, so etwas wie dieses

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

    Ich hoffe, es hilft

    InformationsquelleAutor der Antwort Picci

Schreibe einen Kommentar