37

私の単純化された目標は、アイテム テンプレートを含むリストであるコンポーネントを構築することです。例えば：

<list>item</list>

これが私のコードです：

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

期待される結果：

  • アイテム
  • アイテム
  • アイテム

実結果：

•<br> •<br> • アイテム

4

4 に答える 4

15

私はそれを行う3つの方法を見つけました

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

出力：

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

プランカー: https://plnkr.co/edit/ollxzUhka77wIXrJGA9t?p=preview

もっと見るhttps://github.com/ilio/ng2-dynamic-components/blob/master/README.md

于 2016-04-30T22:05:37.443 に答える
0

少しデザインを変えてみようと思います。<list>間にコンテンツを挿入し、コンポーネント内でその</list>ようなコンテンツを参照する代わりに、必要な入力変数と挿入を使用して、コンテンツの役割を果たすコンポーネントを作成します (つまり、「ローカル変数が渡されたテンプレートを繰り返すため、各アイテムは異なります」)。 Component をリストに追加します。言い換えれば、このようなものng-contentList

ContentComponent

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

リスト

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

役立つことを願っています

于 2016-04-30T14:47:09.113 に答える