[Angular 2] Passing data to components with @Input
@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的更多相关文章
- [Angular 2] Passing data to components with 'properties'
Besides @Input(), we can also use properties on the @Component, to pass the data. import {Component, ...
- [Angular 2] Passing Observables into Components with Async Pipe
The components inside of your container components can easily accept Observables. You simply define ...
- angular-ui-router state.go not passing data to $stateParams
app.js中定义了一个state如下,url接收一个id参数 $stateProvider.state("page.details", { url: "/details ...
- 问题-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 ...
- Windows 的 Oracle Data Access Components (ODAC)
下载 x64bit https://www.oracle.com/technetwork/cn/database/windows/downloads/index.html 适用于 Windows 的 ...
- WIN7系统 64位出现 Net Framework 数据提供程序要求 Microsoft Data Access Components(MDAC).
WIN7系统 64位出现 Net Framework 数据提供程序要求 Microsoft Data Access Components(MDAC).请安装 Microsoft Data Acces ...
- [转]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 ...
- [mjpeg @ ...] unable to decode APP fields: Invalid data found when processing input
通过FFmpeg打开自己笔记本摄像头(HP Wide Vision HD Camera)操作时遇到如下错误: [mjpeg @ 0000029be7cbd000] unable to decode A ...
- [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 ...
随机推荐
- BeanUtils的日期问题
//注册日期类型转换器 //第一种 自定义方法 ConvertUtils.register(new Converter(){ //第一个参数是目标 ...
- TaskbarCreated 消息
托盘中的图片就通过注册这个消息来实现,系统和进程通过进程间通信发送这个消息,进程接收他
- php学习小技巧
1.print_r可打印数组 <?php echo '<p class="ajax">This paragraph was loaded with AJAX.&l ...
- .htaccess内容
<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On RewriteCond %{REQUEST_FILENA ...
- 关于HTML编辑页面(1)
1,<title>...</title> //省略号表示的是网页标题 2,<body>...</body>//省略号表示的是网页正文内容 3,在Drea ...
- 实战EntityFramework
删除对象一定要在同一个context 我尝试这在两个方法中使用两个context(Container)实例来进行一个获得一个删除,结果我获得的”The object cannot be deleted ...
- winform 对话框控件,打印控件
1.文件对话框(FileDialog) 它又常用到两个: 打开文件对话框(OpenFileDialog) 保存文件对话框(SaveFileDialog) 2.字体对话框(FontDialog) 3.颜 ...
- 巧用powerpoint制作符合期刊要求的复合图
- Replicate String in C#
My original posting on string repetition caused a couple responses, and is currently among the Top P ...
- Gap Locks 区间锁
Gap Locks 区间锁 1. 区间锁不能用于语句锁定记录使用一个唯一索引来搜索一个唯一的记录 2.READ COMMITTED 没有区间锁 区间锁是一个锁在一个在index记录间的区间,或者一个l ...