import { Component , OnInit , OnDestroy } from 'angular2/core' ; import { Observable } from 'rxjs/Observable' ; import { Subject } from 'rxjs/Subject' ; import { Subscription } from 'rxjs/Subscription' ; import { Store } from '@ngrx/store' ; import { list , add } from '../../services/people-actions.service' ; import { getList$ } from '../../services/people-selectors.service' ; import { PeopleListComponent } from '../../components/people-list.component/people-list.component' ; import { PersonFormComponent } from '../../components/person-form.component/person-form.component' ; @ Component ( { selector : 'people-list-route' , directives : [ PeopleListComponent , PersonFormComponent ] , template : require ( './people.list.route.html' ) , styles : [ require ( './people.list.route.scss' ) ] } ) export class PeopleListRoute implements OnInit , OnDestroy { public people$ : Observable < Array < any > > = this . _store . let ( getList$ ( ) ) ; public onInit$ = new Subject < any > ( ) ; public onAdd$ = new Subject < any > ( ) ; public initAction$ = this . onInit$ . map ( list ( ) ) ; public addAction$ = this . onAdd$ . map ( add ( ) ) ; constructor ( private _store ) { } private _subscription : Subscription ; ngOnInit ( ) { this . _subscription = Observable . merge ( this . initAction$ , this . addAction$ ) . subscribe ( this . _store ) ; this . onInit$ . next ( null ) ; } ngOnDestroy ( ) { this . _subscription . unsubscribe ( ) ; } }