gpt4 book ai didi

Angular 2模板作为组件的参数

转载 作者:太空狗 更新时间:2023-10-29 16:50:10 24 4
gpt4 key购买 nike

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

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

预期结果:

  • 项目
  • 项目
  • 项目

实际结果:



• 项目

最佳答案

我是这样做的:

用法:

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

组件 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" [ngTemplateOutletContext]="{item: item}"></ng-template>
</li>
</ul>

关于Angular 2模板作为组件的参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36947888/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com