ngRx 官方示例分析 - 5. components

组件通过标准的 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: `
    
Written By:
    
      {{ authors | bcAddCommas }}
    
  `,
  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: `
    
      
        {{ title }}
        {{ subtitle }}
        
      
      
        

      
      
        
      
      
        
        Remove Book from Collection
        

        
        Add Book to Collection
        
      
    

  `,
  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();
  @Output() remove = new EventEmitter();


  /**
   * 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;
  }
}