角度2模板作为组件的参数

发布时间：2020-12-17 09:03:35 所属栏目：安全来源：网络整理

导读：我的简化目标是构建一个包含项目模板的列表的组件.例如.： listitem/list 这是我的代码： import {bootstrap} from 'angular2/platform/browser';import {Component} from 'angular2/core';@Component({ selector: 'list',template: ` ul li *ngFor="let i o

我的简化目标是构建一个包含项目模板的列表的组件.例如.：

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

预期结果：

>项目
>项目
>项目

实际结果：

?
?
?项目

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!