zoukankan      html  css  js  c++  java
  • [Angular 2] Refactoring mutations to enforce immutable data in Angular 2

    When a Todo property updates, you still must create a new Array of Todos and assign a new reference. This lesson walks you through refactoring from the current approach to the immutable approach.

    TodoItemRender.ts:

    import {Component, Input, ViewEncapsulation, EventEmitter, Output} from 'angular2/core';
    @Component({
        selector: 'todo-item-renderer',
        // encapsulation:ViewEncapsulation.Emulated, //Default, (parent style pass )in and no (child style go) out
        // encapsulation:ViewEncapsulation.Native, // no in and no out
        encapsulation:ViewEncapsulation.None, // in and out
        template: `
            <style>
                .completed{
                    text-decoration: line-through;
                }
            </style>
            <div>    
                <span [ngClass]="todo.status"
                      [contentEditable]="todo.isEdit">{{todo.title}}</span>
                <button (click)="toggleTodo.emit(todo)">Toggle</button>
                <button (click)="todo.edit()">Edit</button>
            </div>
        `
    })
    
    export class TodoItemRenderer{
        @Input() todo;
        @Output() toggleTodo = new EventEmitter();
    }

    Here we use EventEmitter to emit a event called 'toggleTodo'. Parent component (TodoList.ts) will catch the event and update the TodoService's todos array.

    And todos array should be a new reference.

    TodoList.ts:

    import {Component} from 'angular2/core';
    import {TodoService} from './TodoService';
    import {TodoItemRenderer} from './TodoItemRenderer';
    import {StartedPipe} from './started-pipe';
    
    @Component({
        selector: 'todo-list',
        pipes: [StartedPipe],
        directives: [TodoItemRenderer],
        template: `
            <ul>
                <li *ngFor="#todo of todoService.todos | started">
                    <todo-item-renderer [todo]="todo"
                    (toggleTodo) = "todoService.toggleTodo($event)" // Contains the todoModule
                    ></todo-item-renderer>
                </li>
                
            </ul>
        `
    })
    
    export class TodoList{
        constructor(public todoService: TodoService){
            
        }
    }

    TodoService.ts:

    import {TodoModule} from './TodoModule';
    export class TodoService {
        todos = [
            //init some todos
            new TodoModule("eat"),
            new TodoModule("sleep"),
            new TodoModule("code")
        ];
    
        addNewTodo(todo) {
            this.todos = [...this.todos, todo];
        }
    
        toggleTodo(todo) {
    
            const i = this.todos.indexOf(todo);
    
            todo.toggle();
    
            this.todos = [
                ...this.todos.slice(0, i),
                todo,
                ...this.todos.slice( i + 1)
            ];
        }
    }

    ---------------------

  • 相关阅读:
    运算符
    java--有关前台展示图片流的用法
    TortoiseSVN--Subversion客户端使用详解及问题解决
    SVN 文件的解锁方法
    JDBC中获取数据表的信息
    tomcat配置文件解决乱码问题
    正则表达式常用匹配
    Java:如何选择最为合适的Web开发框架
    键盘enter事件 兼容FF和IE和Opera
    PayPal 支付接口详解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5308015.html
Copyright © 2011-2022 走看看