web-dev-qa-db-ja.com

Angular 2コンポーネントへのパラメータとしてのテンプレート

私の簡単な目標は、アイテムテンプレートを使用したリストであるコンポーネントを構築することです。例えば。：

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

期待される結果：

  • 項目
  • 項目
  • 項目

実結果：

•
•
•アイテム

angulartypescriptangular2-ngcontent
27
Dizzy

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

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

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

14
IgorL

これは私がそれをやった方法です：

使用法：

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

成分：

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

コンポーネント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

[〜＃〜] plunker [〜＃〜]

AFAIが試しました<ng-content>は繰り返しバインドできませんが、次のようにitemを入力として渡すことができます

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

デザインを少し変更することを検討します。 <list>と</list>の間にコンテンツを挿入し、Listコンポーネントのng-contentを介してそのようなコンテンツを参照する代わりに、コンテンツの役割を果たすコンポーネントを作成します（つまり、ローカル変数が渡されたテンプレートを繰り返して、各項目が異なるようにします」）必要な入力変数を使用して、コンポーネントをリストに挿入します。言い換えれば、このようなもの

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

私はそれが役立つことを願っています

0
Picci