TodoList.ts:
@Component({ selector: ‘todo-list‘, directives: [TodoItemRenderer], template: ` <ul> <li *ngFor="#todo of todoService.todos"> <todo-item-renderer [todo]="todo"></todo-item-renderer> </li> </ul> ` })
TodoItemRender.ts:
import {Component, Input} from ‘angular2/core‘;
@Component({
selector: ‘todo-item-renderer‘,
template: `
<div>
<span [hidden]="todo.status == ‘completed‘"
[contentEditable]="todo.isEdit">{{todo.title}}</span>
<button (click)="todo.toggle()">Toggle</button>
<button (click)="todo.edit()">Edit</button>
</div>
`
})
export class TodoItemRenderer{
@Input() todo
}
Current we pass [todo] to the itemRender from List, we actually can give @Input(‘name‘):
TodoList.ts:
<todo-item-renderer [todoItem]="todo"></todo-item-renderer>
TodoItemRender.ts:
@Input(‘todoItem‘) todo
Ref: Link
[Angular 2] @Input Custom public property naming
原文：http://www.cnblogs.com/Answer1215/p/5331267.html