1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import { Component } from '@angular/core'; @Component({ selector: 'history', template: ` <input type='range' #range style='cursor: pointer' min={1} (input)='setState(range.value)' [max]='maximum' [value]='value'/> <a href='#' style='text-decoration: none' (click)='previousState()' [innerHTML] = 'leftArrow'> </a> <a href='#' style='text-decoration: none' (click)='nextState()' [innerHTML] = 'rightArrow'> </a> ` }) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import { gotoState, redo, undo } from '../../actions'; import stateHistory from '../../statehistory'; import store from '../../store'; export default class History { private leftArrow: string; private rightArrow: string; private stateHistory: any; private topic: string; private unsubscribe: any; private value: number; private maximum: number; constructor() { this.leftArrow = '←'; this.rightArrow = '→'; this.stateHistory = stateHistory; this.unsubscribe = store.subscribe(() => { this.topic = store.getState().topic; this.maximum = this.max(); this.value = this.val(); }); } setState(stateIndex) { store.dispatch(gotoState(stateIndex)); } previousState() { store.dispatch(undo()); } nextState() { store.dispatch(redo()); } val() { return this.stateHistory.past ? this.stateHistory.past.length : 0; } max() { return (this.stateHistory.past ? this.stateHistory.past.length : 0) + (this.stateHistory.present ? 1 : 0) + (this.stateHistory.future ? this.stateHistory.future.length : 0) - 1; } ngOnDestroy() { this.unsubscribe(); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | import { Component } from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/core'; import store from '../../store'; import Book from './book.component'; @Component({ selector: 'books', template: ` <div *ngIf='status === "Fetching..."' style='width: 100%; padding: 20px; text-align: center'> <img src="../images/spinner.gif" role="presentation" /> </div> <div *ngIf='displayMode === "LIST"' style='width: 100%; padding: 20px;'> <ul> <li *ngFor='let book of books'> <book [item]='book' [displayMode]='displayMode'></book> </li> </ul> </div> <div *ngIf='displayMode === "THUMBNAIL"' style='padding: 20px;'> <book *ngFor='let book of books' [item]='book' [displayMode]='displayMode'> </book> </div> ` }) export default class Books { private books: Array<Book>; private displayMode: string; private status: string; private unsubscribe: any; constructor() { this.unsubscribe = store.subscribe(() => { const state = store.getState(); this.books = state.books; this.displayMode = state.displayMode; this.status = state.currentStatus; }); } ngOnDestroy() { this.unsubscribe(); } } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |