src/app/todo/todo.component.ts
| encapsulation | ViewEncapsulation.None |
| selector | app-todo |
| styleUrls | ./todo.component.scss |
| templateUrl | ./todo.component.html |
Properties |
Methods |
constructor(service)
|
||||
|
Defined in src/app/todo/todo.component.ts:20
|
||||
|
Parameters :
|
| addTodo | ||||||
addTodo(todo: Todo)
|
||||||
|
Defined in src/app/todo/todo.component.ts:33
|
||||||
|
Parameters :
Returns :
void
|
| clearCompleted |
clearCompleted()
|
|
Defined in src/app/todo/todo.component.ts:49
|
|
Returns :
void
|
| drop | ||||||
drop(event: CdkDragDrop
|
||||||
|
Defined in src/app/todo/todo.component.ts:57
|
||||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Defined in src/app/todo/todo.component.ts:53
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/todo/todo.component.ts:24
|
|
Returns :
void
|
| removeTodo | ||||||
removeTodo(todo: Todo)
|
||||||
|
Defined in src/app/todo/todo.component.ts:41
|
||||||
|
Parameters :
Returns :
void
|
| toggleAll |
toggleAll()
|
|
Defined in src/app/todo/todo.component.ts:45
|
|
Returns :
void
|
| toggleTodo | ||||||
toggleTodo(todo: Todo)
|
||||||
|
Defined in src/app/todo/todo.component.ts:37
|
||||||
|
Parameters :
Returns :
void
|
| onTodosChangedSubscrition |
Type : Subscription
|
|
Defined in src/app/todo/todo.component.ts:20
|
| todos |
Type : Todo[]
|
|
Defined in src/app/todo/todo.component.ts:19
|
import {
Component,
OnInit,
OnDestroy,
Inject,
ViewEncapsulation
} from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { Subscription } from 'rxjs';
import { Todo } from './todo.model';
@Component({
selector: 'app-todo',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class TodoComponent implements OnInit, OnDestroy {
todos: Todo[];
onTodosChangedSubscrition: Subscription;
constructor(@Inject('todoService') private service) {}
ngOnInit() {
this.service.getTodosByParams();
this.onTodosChangedSubscrition = this.service.onTodosChangedSubject.subscribe(
todo => {
this.todos = todo;
}
);
}
addTodo(todo: Todo) {
this.service.addTodo(todo);
}
toggleTodo(todo: Todo) {
this.service.toggleTodo(todo);
}
removeTodo(todo: Todo) {
// this.service.deleteTodo(todo);
}
toggleAll() {
// this.service.toggleAll();
}
clearCompleted() {
// this.service.clearCompleted();
}
ngOnDestroy() {
this.onTodosChangedSubscrition.unsubscribe();
}
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.todos, event.previousIndex, event.currentIndex);
}
}
<stbui-layout>
<stbui-layout-header>
<stbui-search class="search mat-elevation-z4 stbui-background-white" placeholder="搜索..."></stbui-search>
</stbui-layout-header>
<stbui-layout-sidenav>
<app-todo-sidenav></app-todo-sidenav>
</stbui-layout-sidenav>
<app-todo-toolbar></app-todo-toolbar>
<app-todo-list class="todo-list" cdkDropList (cdkDropListDropped)="drop($event)">
<app-todo-item class="todo-list-box" cdkDrag *ngFor="let todo of todos" [todo]="todo"></app-todo-item>
</app-todo-list>
</stbui-layout>
./todo.component.scss
$margin-top__search__title: 42px;
.search {
margin-top: $margin-top__search__title;
}
.todo-list {
display: block;
}
.todo-list-box {
display: block;
}
.todo-list-item {
position: relative;
padding: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
cursor: pointer;
background: #fff;
&.completed {
background: #eee;
}
.handle {
cursor: move;
user-select: none;
}
.item {
margin: 0 16px 0 8px;
.title {
font-size: 15px;
font-weight: 500;
}
.notes {
margin-top: 4px;
}
}
}
//
.cdk-drag-preview {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.todo-list.cdk-drop-list-dragging .todo-list-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}