组件通过标准的 Input 和 Output 进行操作,并不直接访问 store.

/app/components/book-authors.ts

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

import { Book } from '../models/book';

@Component({
selector: 'bc-book-authors',
template: `
<h5 md-subheader>Written By:</h5>
<span>
{{ authors | bcAddCommas }}
</span>
`,
styles: [`
h5 {
margin-bottom: 5px;
}
`]
})
export class BookAuthorsComponent {
@Input() book: Book; get authors() {
return this.book.volumeInfo.authors;
}
}

/app/components/book-detail.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Book } from '../models/book'; @Component({
selector: 'bc-book-detail',
template: `
<md-card *ngIf="book">
<md-card-title-group>
<md-card-title>{{ title }}</md-card-title>
<md-card-subtitle *ngIf="subtitle">{{ subtitle }}</md-card-subtitle>
<img md-card-sm-image *ngIf="thumbnail" [src]="thumbnail"/>
</md-card-title-group>
<md-card-content>
<p [innerHtml]="description"></p>
</md-card-content>
<md-card-footer class="footer">
<bc-book-authors [book]="book"></bc-book-authors>
</md-card-footer>
<md-card-actions align="start">
<button md-raised-button color="warn" *ngIf="inCollection" (click)="remove.emit(book)">
Remove Book from Collection
</button> <button md-raised-button color="primary" *ngIf="!inCollection" (click)="add.emit(book)">
Add Book to Collection
</button>
</md-card-actions>
</md-card> `,
styles: [`
:host {
display: flex;
justify-content: center;
margin: 75px 0;
}
md-card {
max-width: 600px;
}
md-card-title-group {
margin-left: 0;
}
img {
width: 60px;
min-width: 60px;
margin-left: 5px;
}
md-card-content {
margin: 15px 0 50px;
}
md-card-actions {
margin: 25px 0 0 !important;
}
md-card-footer {
padding: 0 25px 25px;
position: relative;
}
`]
})
export class BookDetailComponent {
/**
* Presentational components receieve data through @Input() and communicate events
* through @Output() but generally maintain no internal state of their
* own. All decisions are delegated to 'container', or 'smart'
* components before data updates flow back down.
*
* More on 'smart' and 'presentational' components: https://gist.github.com/btroncone/a6e4347326749f938510#utilizing-container-components
*/
@Input() book: Book;
@Input() inCollection: boolean;
@Output() add = new EventEmitter<Book>();
@Output() remove = new EventEmitter<Book>(); /**
* Tip: Utilize getters to keep templates clean
*/
get id() {
return this.book.id;
} get title() {
return this.book.volumeInfo.title;
} get subtitle() {
return this.book.volumeInfo.subtitle;
} get description() {
return this.book.volumeInfo.description;
} get thumbnail() {
return this.book.volumeInfo.imageLinks.smallThumbnail;
}
}

ngRx 官方示例分析 - 5. components的更多相关文章

  1. ngRx 官方示例分析 - 3. reducers

    上一篇:ngRx 官方示例分析 - 2. Action 管理 这里我们讨论 reducer. 如果你注意的话,会看到在不同的 Action 定义文件中,导出的 Action 类型名称都是 Action ...

  2. ngRx 官方示例分析 - 2. Action 管理

    我们从 Action 名称开始. 解决 Action 名称冲突问题 在 ngRx 中,不同的 Action 需要一个 Action Type 进行区分,一般来说,这个 Action Type 是一个字 ...

  3. ngRx 官方示例分析 - 1. 介绍

    ngRx 的官方示例演示了在具体的场景中,如何使用 ngRx 管理应用的状态. 示例介绍 示例允许用户通过查询 google 的 book  API  来查询图书,并保存自己的精选书籍列表. 菜单有两 ...

  4. ngRx 官方示例分析 - 4.pages

    Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...

  5. ngRx 官方示例分析 - 6 - Effect

    @ngrx/effect 前面我们提到,在 Book 的 reducer 中,并没有 Search 这个 Action 的处理,由于它需要发出一个异步的请求,等到请求返回前端,我们需要根据返回的结果来 ...

  6. Halcon斑点分析官方示例讲解

    官方示例中有许多很好的例子可以帮助大家理解和学习Halcon,下面举几个经典的斑点分析例子讲解一下 Crystals 图中显示了在高层大气中采集到的晶体样本的图像.任务是分析对象以确定特定形状的频率. ...

  7. RocketMQ源码分析之从官方示例窥探:RocketMQ事务消息实现基本思想

    摘要: RocketMQ源码分析之从官方示例窥探RocketMQ事务消息实现基本思想. 在阅读本文前,若您对RocketMQ技术感兴趣,请加入RocketMQ技术交流群 RocketMQ4.3.0版本 ...

  8. DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版------------- ...

  9. DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...

随机推荐

  1. 【HDU2222】Keywords Search AC自动机

    [HDU2222]Keywords Search Problem Description In the modern time, Search engine came into the life of ...

  2. 【C语言】外部函数和内部函数

    目录 [外部函数]  [内部函数] 1.外部函数  定义的函数能被本文件和其它文件访问(默认). 注:不允许有同名的外部函数. 2.内部函数  定义的函数只能被本文件访问,其它文件不能访问. 注:允许 ...

  3. JAVA开发-我的第一个webScan扫描器

    写的第一句话就是感谢shack2,参考了他的代码知道原来有的解耦可以这样写,但是又在他的基础上改写了很多. 代码分享给大写,下面是程序的截图,我把他取名为:HadesWebScan   ps:Wind ...

  4. Win2008R2PHP5.4环境加载Zend模块

    1.需要2个文件 Zend Optimizer和Zend Guard Loade s 下载Zend Guard Loader包.(官方地址:http://www.zend.com/en/product ...

  5. Creating a web application.

    About creating web GIS applications As you learn and use ArcGIS for Server, you'll probably reach th ...

  6. Node.js之异步流控制

    前言 在没有深度使用函数回调的经验的时候,去看这些内容还是有一点吃力的.由于Node.js独特的异步特性,才出现了"回调地狱"的问题,这篇文章中,我比较详细的记录了如何解决异步流问 ...

  7. python用unittest+HTMLTestRunner的框架测试并生成测试报告

    直接贴代码: import unittestfrom selenium import webdriverfrom time import sleepimport osimport time # 定义打 ...

  8. 洛谷P3373 [模板]线段树 2(区间增减.乘 区间求和)

    To 洛谷.3373 [模板]线段树2 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.将某区间每一个数乘上x 3.求出某区间每一个数的和 输入输出格式 输入格 ...

  9. React(0.13) 定义一个动态的组件(注释,样式)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  10. 【剑指offer】11--旋转数组的最小数字(二分查找)

    原创博文,转载请注明出处! # 本文是牛客网<剑指offer>刷题笔记 1.题目 旋转数组的最小数字:输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1 ...