Angular待办事项应用3

时间：2018-10-13 02:45:01 阅读：122 评论：0 收藏：0 [点我收藏+]

标签：建立 ddt table inject F12 string esc temp 地址

隔离业务逻辑

接着上一节，业务逻辑应该复古牛仔单独的service中，我们在todo文件夹中建立TodoService

ng g s todo/todo

技术分享图片

引入UUID包

todo中id要唯一，一个是采用一个自增长数列，一个是采用随机生成的一组不可能重复的字符序列，常见的就是UUID

npm install --save angular2-uuid

　　安装成功：

技术分享图片

修改id类型

export class Todo {
    id:string;
    desc:string;
    completed:boolean;
}

修改service

import { Injectable } from ‘@angular/core‘;
import { Todo } from "./todo.model";
import { UUID } from "angular2-uuid";

@Injectable()
export class TodoService {

  todos:Todo[]=[];
  addTodo(todoItem:string):Todo[]{
    let todo={
      id:UUID.UUID(),
      desc:todoItem,
      completed:false
    };
    this.todos.push(todo);
    return this.todos;
  }

  constructor() { }

}

技术分享图片

组件注入依赖service

import { Component, OnInit } from ‘@angular/core‘;
import { Todo } from "./todo.model";
import { TodoService } from "./todo.service";

@Component({
  selector: ‘app-todo‘,
  templateUrl: ‘./todo.component.html‘,
  styleUrls: [‘./todo.component.css‘],
  providers:[TodoService]
})
export class TodoComponent implements OnInit {

  todos:Todo[]=[];
  desc=‘‘;
  addTodo(){
    this.todos=this.service.addTodo(this.desc);
    this.desc=‘‘;
  }

  constructor(private service:TodoService) { }

  ngOnInit() {
  }

}

技术分享图片