ng--todolist

todolist小案例

该案例的模板文件下载地址

走外国服务器，￣□￣｜｜

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

核心组件app.component.ts

发现这俩不是同一类文件，哈哈哈，٩(๑>◡<๑)۶

import { Component } from '@angular/core';

const todos = [
  {
    id: 1,
    title: '吃饭',
    done: true
  },
  {
    id: 2,
    title: '唱歌',
    done: false
  },
  {
    id: 3,
    title: '写代码',
    done: true
  }
]

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public todos: {
    id: number,
    title: string,
    done: boolean
  }[] = JSON.parse(window.localStorage.getItem('todos') || '[]')

  public visibility: string = 'all'

  public currentEditing: {
    id: number,
    title: string,
    done: boolean
  } = null

  // 该函数是一个特殊的 Angular 生命周期钩子函数
  // 它会在 Angular 应用初始化的时候执行一次
  ngOnInit () {
    // 初始化的时候手动调用一次
    this.hashchangeHandler()

    // 注意：这里要 bind this绑定
    window.onhashchange = this.hashchangeHandler.bind(this)
  }

  // 当 Angular 组件数据发生改变的时候，ngDoCheck 钩子函数会被触发
  // 我们要做的就是在这个钩子函数中去持久化存储我们的 todos 数据
  ngDoCheck() {
    window.localStorage.setItem('todos', JSON.stringify(this.todos))
  }

  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)
    }
  }

  // 实现导航切换数据过滤的功能
  // 1. 提供一个属性，该属性会根据当前点击的链接返回过滤之后的数据
  //   filterTodos
  // 2. 提供一个属性，用来存储当前点击的链接标识
  //    visibility 字符串
  //    all、active、completed
  // 3. 为链接添加点击事件，当点击导航链接的时候，改变
  //     

  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: boolean) {
    this.todos.forEach(t => t.done = val)
  }

  removeTodo (index: number): void {
    this.todos.splice(index, 1)
  }

  saveEdit (todo, e) {
    // 保存编辑
    todo.title = e.target.value

    // 去除编辑样式
    this.currentEditing = null
  }

  handleEditKeyUp (e) {
    const {keyCode, target} = e
    if (keyCode === 27) {
      // 取消编辑
      // 同时把文本框的值恢复为原来的值
      target.value = this.currentEditing.title
      this.currentEditing = null
    }
  }

  get remaningCount () {
    return this.todos.filter(t => !t.done).length
  }

  hashchangeHandler () {
    // 当用户点击了锚点的时候，我们需要获取当前的锚点标识
      // 然后动态的将根组件中的 visibility 设置为当前点击的锚点标识
    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

<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
      (keyup.enter)="addTodo($event)">
  </header>
  <ng-template [ngIf]="todos.length">
    <!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
  <input
    id="toggle-all"
    class="toggle-all"
    type="checkbox"
    (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 是每一个任务项
      每个任务项有三种状态：
        正常状态 没有样式
        完成状态 completed
        编辑状态 editing
     -->
    <li
      *ngFor="let todo of filterTodos; let i = index;"
      [ngClass]="{
        completed: todo.done,
        editing: currentEditing === todo
      }">
      <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)="handleEditKeyUp($event)"
        (keyup.enter)="saveEdit(todo, $event)"
        (blur)="saveEdit(todo, $event)">
    </li>
  </ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
  <!-- This should be `0 items left` by default -->
  <span class="todo-count"><strong>{{ remaningCount }}</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>
  </ng-template>

</section>
<footer class="info">
  <p>Double-click to edit a todo</p>
  <!-- Remove the below line ↓ -->
  <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
  <!-- Change this out with your name and url ↓ -->
  <p>Created by <a href="http://todomvc.com">you</a></p>
  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>