zoukankan      html  css  js  c++  java
  • [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.

    For this part of code, we use 'todo' a lot, so it would be a good idea to exract a complete to handle all the action about todo:

            <ul>
                <li *ngFor="#todo of todoService.todos">
                    <span [hidden]="todo.status == 'completed'"
                        [contentEditable]="todo.isEdit">{{todo.title}}</span>
                    <button (click)="todo.toggle()">Toggle</button>
                    <button (click)="todo.edit()">Edit</button>
                </li>
                
            </ul>

    TodoItemRenderer.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
    }

    TodoList.ts:

    import {Component} from 'angular2/core';
    import {TodoService} from './TodoService';
    import {TodoItemRenderer} from './TodoItemRenderer';
    
    @Component({
        selector: 'todo-list',
        directives: [TodoItemRenderer],
        template: `
            <ul>
                <li *ngFor="#todo of todoService.todos">
                    <todo-item-renderer [todo]="todo"></todo-item-renderer>
                </li>
                
            </ul>
        `
    })
    
    export class TodoList{
        constructor(public todoService: TodoService){
            
        }
    }
  • 相关阅读:
    kis 7.5和360似乎存在兼容性的问题,
    mysql timeout
    update users set a=1 where id in (1,2,3)这句在rails中该如何写呢
    mysql数据库 text类型的长度限制,使用change_column来进行长度的修改并不影响原有数据
    杭州的一个托管idc商
    User.find_each
    ruby 批量更新
    mongodb kt双机房灾备
    imagemagick使用
    kingdee kis
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5302806.html
Copyright © 2011-2022 走看看