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
        ){
    
        }
    }
  • 相关阅读:
    p1822
    Spring框架——文件上传(SpringMVC)
    Spring框架——拦截器(SpringMVC)
    Spring框架——SpringMVC
    Spring框架——AOP
    Spring框架——SpringEL
    Spring框架——Bean与DI
    毕业实习与毕设
    Spring框架——Ioc、DI与Spring框架
    Java基础——异常和断言
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4910174.html
Copyright © 2011-2022 走看看