typescript Angular 2 模板作为组件的参数

Angular 2 Template as a parameter to component

提问by Dizzy

My simplified goal is to build a component which is a list with item template. E.g.:

我的简化目标是构建一个组件，它是一个带有项目模板的列表。例如：

<list>item</list>

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

Expected result:

预期结果：

• item
• item
• item

• 物品
• 物品
• 物品

Actual result:

实际结果：

?
?
? item

?
?
? 物品

采纳答案by IgorL

I found 3 ways to do it

我找到了 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> 

output:

输出：

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

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

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

see more https://github.com/ilio/ng2-dynamic-components/blob/master/README.md

查看更多https://github.com/ilio/ng2-dynamic-components/blob/master/README.md

回答by RVandersteen

This is how I did it:

我是这样做的：

Usage:

用法：

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

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

Component:

零件：

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

Component HTML

组件 HTML

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

回答by Ankit Singh

PLUNKER

普伦克

AFAI tried <ng-content>can't be binded repeatedly, but you can pass itemas input, like this

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

  }
}

回答by Picci

I would consider changing slightly the design. Instead of inserting content between <list>and </list>and reference such content via ng-contentin the Listcomponent, I would create a Component that plays the role of content (i.e. "repeat template with local variables passed, so each item is different") with the required input variables and insert the Component into the list. In other words something like this

我会考虑稍微改变设计。我不会在组件之间插入内容<list>并</list>通过组件引用此类内容，而是创建一个充当内容角色的组件（即“通过局部变量重复模板，因此每个项目都不同”）以及所需的输入变量并插入组件到列表中。换句话说，像这样ng-contentList

ContentComponent

内容组件

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

List

列表

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

I hope it helps

我希望它有帮助