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 | import { Component } from '@angular/core'; import Books from './books.component'; import Controls from './controls.component'; import StateViewer from './stateviewer.component'; import store from '../../store'; import { fetchBooks, setTopic } from '../../actions'; @Component({ selector: 'app', template: ` <div style='text-align: center; font-size: 1.5em'> {{app.title}} </div> <hr/> <controls></controls> <books></books> <state-viewer></state-viewer>` }) export default class { ngOnInit() { store.dispatch(setTopic('Border collies')); store.dispatch(fetchBooks()); } app = { title: 'Book Search (Angular version)', }; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { Component } from '@angular/core'; @Component({ selector: 'controls', template: ` <topic-selector></topic-selector> <display-mode-container></display-mode-container> <history></history> ` }) export default class Controls { } |
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 | import { Component } from '@angular/core'; import { fetchBooks, setTopic } from '../../actions'; import store from '../../store'; @Component({ selector: 'topic-selector', template: ` <label for='topic'>Topic</label> <input #topicInput [(ngModel)]='topic' (input)='setTopic(topicInput.value)' (keyup.enter)='fetchTopic(topicInput.value)' autofocus/> ` }) export default class TopicSelector { private topic: string; private unsubscribe: any; constructor() { store.subscribe(() => { this.topic = store.getState().topic; }); } setTopic(newTopic) { store.dispatch(setTopic(newTopic)); } fetchTopic(newTopic) { store.dispatch(fetchBooks()); } ngOnDestroy() { this.unsubscribe(); } } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |