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.

    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
        ){
    
        }
    }
  • 相关阅读:
    斐波那契数列
    旋转数组的最小数字
    用两个栈实现队列
    重建二叉树
    从尾到头打印链表
    2020/01/11,人活着是为了一口气
    2020/01/11,放肆和克制,敏感层次
    2020/01/11,记忆单元
    2020/01/11,经济基础决定高层建筑和个性
    git
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4910174.html
Copyright © 2011-2022 走看看