@Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse components, such as item renderers, and have them display different values for each instance of the renderer.

todoItemRender.ts

import {Input, Component, View} from "angular2/angular2";

@Component({
selector: 'todo-item-render'
})
@View({
template: `
<div>
<span [content-editable]="todoinput.status === 'started'">{{todoinput.title}}</span>
<button (click)="todoinput.toggle()">Toggle</button>
</div>
`
}) export class TodoItemRender{
@Input() todoinput: TodoModel;
}

todoList.ts

import {Component, View, NgFor} from 'angular2/angular2';
import {TodoService} from './todoService';
import {TodoItemRender} from './todoItemRender' @Component({
selector: 'todo-list'
})
@View({
directives: [NgFor, TodoItemRender],
template: `
<div>
<todo-item-render
*ng-for="#todo of todoService.todos"
[todoinput]="todo"
>
</todo-item-render>
</div>
`
}) export class TodoList{
constructor(
public todoService:TodoService
){ }
}

[Angular 2] Passing data to components with @Input的更多相关文章

  1. [Angular 2] Passing data to components with 'properties'

    Besides @Input(), we can also use properties on the @Component, to pass the data. import {Component, ...

  2. [Angular 2] Passing Observables into Components with Async Pipe

    The components inside of your container components can easily accept Observables. You simply define ...

  3. angular-ui-router state.go not passing data to $stateParams

    app.js中定义了一个state如下,url接收一个id参数 $stateProvider.state("page.details", { url: "/details ...

  4. 问题-Error creating object. Please verify that the Microsoft Data Access Components 2.1(or later) have been properly installed.

    问题现象:软件在启动时报如下错误信息:Exception Exception in module zhujiangguanjia.exe at 001da37f. Error creating obj ...

  5. Windows 的 Oracle Data Access Components (ODAC)

     下载 x64bit https://www.oracle.com/technetwork/cn/database/windows/downloads/index.html 适用于 Windows 的 ...

  6. WIN7系统 64位出现 Net Framework 数据提供程序要求 Microsoft Data Access Components(MDAC).

    WIN7系统 64位出现  Net Framework 数据提供程序要求 Microsoft Data Access Components(MDAC).请安装 Microsoft Data Acces ...

  7. [转]Passing data between pages in JQuery Mobile mobile.changePage

    本文转自:http://ramkulkarni.com/blog/passing-data-between-pages-in-jquery-mobile/ I am working on a JQue ...

  8. [mjpeg @ ...] unable to decode APP fields: Invalid data found when processing input

    通过FFmpeg打开自己笔记本摄像头(HP Wide Vision HD Camera)操作时遇到如下错误: [mjpeg @ 0000029be7cbd000] unable to decode A ...

  9. [Angular 2] Passing Template Input Values to Reducers

    Angular 2 allows you to pass values from inputs simply by referencing them in the template and passi ...

随机推荐

  1. javascript--自己用的插件

    /** * Created by Administrator on 2015/4/2. * 时间:2012-6-6 作用:一对form标签下有多个(包括一个)表单需要提交时,提交当前作用域中的表单项做 ...

  2. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  3. 用urlencode(String str)对URL传递参数进行编码,提高安全

    在PHP 提交地址后面带有参数的时候,参数会在浏览器的地址栏暴露无疑,这样是不安全的,这个时候就必须用些方法对这些参数进行安全处理 这里可以用 urlencode(String URL);//对URL ...

  4. linux下Rtree的安装

    1. 首先安装依赖libspatialindexhttp://libspatialindex.github.io/ sudo ./configure sudo make sudo make insta ...

  5. NSDictionary 使用总结

    NSDictionary使用小结 #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @ ...

  6. BZOJ 1011 遥远的行星

    Description 直线上N颗行星,X=i处有行星i,行星J受到行星I的作用力,当且仅当i<=AJ.此时J受到作用力的大小为 Fi->j=Mi*Mj/(j-i) 其中A为很小的常量,故 ...

  7. codeforces D. Painting The Wall

    http://codeforces.com/problemset/problem/399/D 题意:给出n和m,表示在一个n*n的平面上有n*n个方格,其中有m块已经涂色.现在随机选中一块进行涂色(如 ...

  8. UpdateLayeredWindow, Layered Windows, codeproject

    http://www.codeproject.com/Articles/16362/Bring-your-frame-window-a-shadow http://www.codeproject.co ...

  9. 一句话改变TGraphicControl控件的left坐标的前世今生

    稍微用脑子想了一下,图形控件没有句柄,因此先把自己的坐标改一改,然后只要把父控件的某些区域Invalidate一下就可以了,WM_PAINT消息一来,父控件就会重绘所有子图形控件,就达到了相应的效果. ...

  10. 常用的用户状态命令包括:whoami、id、groups、newgrp 等

    用户状态命令 常用的用户状态命令包括:whoami.id.groups.newgrp 等.