今天完成的事情：
规划根路径：
对应根路径建立一个todo组件，使用ng g c todo来生成组件，然后在app.routes.ts中加入路由定义，对于根路径不再需要重定向到登录了，把它改写成重定向到todo。
export const routes: Routes = [
{
path: '',
redirectTo: 'todo',
pathMatch: 'full'
},
{
path: 'todo',
component: TodoComponent
},
{
path: 'login',
component: LoginComponent
}
];
在todo文件夹内建立TodoService：ng g s todo\todo。所有创建的todo都是id为1的，这需要改一下。常见的不重复id创建方式有两种，一个是搞一个自增长数列，另一个是采用随机生成一组不可能重复的字符序列，常见的就是UUID了。引入一个uuid的包：npm i --save angular2-uuid，，这里就执行这一个命令就足够了。由于此时Todo对象的id已经是字符型了，更改其声明为id: string。
service如下：
import { Injectable } from '@angular/core';
import {Todo} from './todo.model';
import { UUID } from 'angular-uuid';
@Injectable()
export class TodoService {
todos: Todo[] = [];
constructor() { }
addTodo(todoItem:string): Todo[] {
let todo = {
id: UUID.UUID(),
desc: todoItem,
completed: false
};
this.todos.push(todo);
return this.todos;
}
}
组件代码如下：
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 = '';
constructor(private service:TodoService) { }
ngOnInit() {
}
addTodo(){
this.todos = this.service.addTodo(this.desc);
this.desc = '';
}
}
明天计划的事情：
继续学习angular
问题：
尽快理解rxjs
收获：
angury插件的使用
返回列表
评论