小编Akh*_*esh的帖子

Angular2中列表组件的自定义模板(不包含ng-content的转换)

我有一个列表组件,只显示名称.list组件应该能够获取由用户提供的自定义模板.

列表组件

import {Component } from 'angular2/core';

@Component({
  selector: 'my-list',
  template: `<p>This is List</p>
     <ul>
       <li *ngFor="#i of data"><div class='listItem'>{{i.name}}</div></li>
    </ul>`
})
export class MyList implements OnInit{ 
    data: Array<any> = [{name: 'John', age: 26},{name: 'Kevin', age: 26},  {name:'Simmons', age:26}];
}
Run Code Online (Sandbox Code Playgroud)

我的要求

<my-list>
   <div>{{i.name}}-{{i.age}}</div> //user should be able to provide custom template like this
</my-list>
Run Code Online (Sandbox Code Playgroud)

我尝试使用ng-content,但它会引发错误.在角度1同样的事情用于处理被抄除的内容.我们在角度2中有任何替代的手动转换,如果没有,那么我们如何在angular2中实现此功能.

这是普兰克

javascript transclusion angular

4
推荐指数
1
解决办法
3382
查看次数

标签 统计

angular ×1

javascript ×1

transclusion ×1