大家好，又见面了，我是你们的朋友全栈君。
依赖css
代码语言：javascript复制npm i todomvc-common todomvc-app-cssapp.component.ts
代码语言：javascript复制import {
Component} from '@angular/core';
const todos = [
{
id: 1,
title: '吃饭',
done: true
},
{
id: 1,
title: '工作',
done: false
},
{
id: 1,
title: '运动',
done: true
}
]
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
h_title = 'todo-angular';
public todos: {
id: number,
title: string,
done: boolean
}[] = JSON.parse( window.localStorage.getItem('todos') || '[]');
// 该函数是一个特殊的angular生命周期钩子函数
// 它会在angular应用初始话的时候执行一次
ngOnInit() {
window.onhashchange = () => {
this.hashChangeHandler()
// 当用户点击了锚点的时候，我们需要获取当前的锚点标识
// 然后动态的将根组件visibility设置为当前点击的锚点标识
//注意 bind ,不然的话this就变成window了
window.onhashchange = this.hashChangeHandler.bind(this)
}
}
// 当angular组件数据发生改变的时候，ngDoCheck钩子被触发
// 在钩子函数中持久化数据
ngDoCheck(){
window.localStorage.setItem('todos', JSON.stringify(this.todos))
}
public currentEditing: {
id: number,
title: string,
done: boolean
} = null
// 实现导航切换数据过滤
// 1. 提供一个属性，该属性会根据当前点击的连接返回过滤后的数据 filterTodos
// 2. 提供一个属性，用来存储当前点击的连接标识 visibility all active completed
// 3. 为连接提供点击事件，当点击导航链接的时候，改变
//
public visibility: string = 'all'
get filterTodos() {
if (this.visibility === 'all') {
return this.todos
} else if (this.visibility === 'active') {
return this.todos.filter((t => !t.done))
} else if (this.visibility === 'completed') {
return this.todos.filter(t => t.done)
}
return null
}
addTodo(e): void {
const titleText = e.target.value
if (!titleText.length) {
return
}
const last = this.todos[this.todos.length - 1]
this.todos.push({
id: last ? last.id 1 : 1,
title: titleText,
done: false
})
e.target.value = ''
}
get toggleAll() {
return this.todos.every(t => t.done)
}
set toggleAll(val) {
this.todos.forEach(t => t.done = val)
}
removeTodo(index: number) {
this.todos.splice(index, 1)
}
saveEdit(todo, e) {
this.currentEditing = null
todo.title = e.target.value
}
handleEditUp(e) {
const {
keyCode, target} = e
if (keyCode === 27) {
target.value = this.currentEditing.title
this.currentEditing = null
}
}
get remainingCount() {
return this.todos.filter(t => !t.done).length
}
hashChangeHandler(){
const hash = window.location.hash.substr(1)
switch (hash) {
case '/':
this.visibility = 'all'
break;
case '/active':
this.visibility = 'active'
break;
case '/completed':
this.visibility = 'completed'
break;
}
}
//清除所有
clearAllDone() {
this.todos = this.todos.filter(t => !t.done)
}
}app.component.html
代码语言：javascript复制<section class="todoapp" ng-app="">
<header class="header">
<h1>待办事项</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus (keyup.enter)="addTodo($event)" >
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main" *ngIf="todos.length">
<input id="toggle-all" class="toggle-all" type="checkbox" [checked]="toggleAll">
<!-- (change)="toggleAll = $event.target.checked"-->
<!-- [checked]="toggleAll">-->
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li *ngFor="let todo of filterTodos; let i = index;" [ngClass]="{ editing: currentEditing === todo, completed: todo.done }">
<div class="view">
<input class="toggle" type="checkbox" [(ngModel)]="todo.done">
<label (dblclick)="currentEditing = todo">{
{ todo.title }}</label>
<button class="destroy" (click)="removeTodo(i)"></button>
</div>
<input class="edit" [value]="todo.title" (keyup.enter)="saveEdit(todo, $event)" (keyup)="handleEditUp($event)" (blur)="saveEdit(todo, $event)">
</li>
</ul>
</section>
<!-- This footer should be hidden by default and shown when there are todos -->
<footer class="footer" *ngIf="todos.length">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>{
{remainingCount}}</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a [ngClass]="{ selected: visibility === 'all' }" href="#/">All</a>
</li>
<li>
<a [ngClass]="{ selected: visibility === 'active' }" href="#/active">Active</a>
</li>
<li>
<a [ngClass]="{ selected: visibility === 'completed' }" href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button (click)="clearAllDone()" class="clear-completed">Clear completed
</button>
</footer>
</section>style.css
代码语言：javascript复制/* You can add global styles to this file, and also import other style files */
@import url('~todomvc-common/base.css');
@import url('~todomvc-app-css/index.css');tsconfig.json
代码语言：javascript复制"strict": false,app.module.ts
代码语言：javascript复制import {
NgModule } from '@angular/core';
import {
BrowserModule } from '@angular/platform-browser';
import {
FormsModule} from "@angular/forms";
import {
AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
}) export class AppModule {
}版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/194860.html原文链接：https://javaforall.cn
