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(); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import { Component, Input } from '@angular/core'; import store from '../../store'; @Component({ selector: 'book', template: ` <span *ngIf='displayMode === "THUMBNAIL"' style='padding: 10px'> <a href={{item.volumeInfo.canonicalVolumeLink}}> <img src={{item.volumeInfo.imageLinks.thumbnail}}/> </a> </span> <span *ngIf='displayMode === "LIST"'> <a href={{item.volumeInfo.canonicalVolumeLink}}> {{item.volumeInfo.title}} </a> </span> ` }) export default class Book { @Input() item: any; @Input() displayMode: string; } |
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 | import { Component } from '@angular/core'; import store from '../../store'; import stateHistory from '../../statehistory'; @Component({ selector: 'state-viewer', template: ` <hr/> <span style='font-style: tahoma; font-size: 1.5em'> Application State </span> <div style='padding-top: 10px'> Topic: {{state.topic}}<br /> Display mode: {{state.displayMode}}<br /> Books displayed: {{ state.books.length }}<br /> Actions processed: {{ stateHistory.past.length + stateHistory.future.length + 1 }}<br /> Current action: {{ stateHistory.past.length + 1 }} </div> ` }) export default class StateViewer { private state: any; private stateHistory: any; private unsubscribe: any; constructor( ){ this.state = store.getState(); this.stateHistory = stateHistory; this.unsubscribe = store.subscribe(() => { this.state = store.getState(); }); } ngOnDestroy() { this.unsubscribe(); } } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |