angular 2 share data between components
<p>I am using Angular 2 rc1.
I have a component that shows a post and a component with slider-template.
How do I pass data from the post component to the slider component</p>

<p><strong>PortfolioDetail.component.ts</strong></p>

<pre><code>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Http, Response, HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_DIRECTIVES, Router, RouteSegment } from '@angular/router';

import { PortfolioService } from './portfolio.service';
import { Helper } from '../../Services/helper.service';
import { SliderComponent } from './SliderComponent';

@Component({
  'selector': 'portfolio',
  'templateUrl': '/api/templates/PostComponent.portfoliodetail',
  'providers': [PortfolioService, Helper],
  'directives': [ROUTER_DIRECTIVES, SliderComponent],
  'encapsulation': ViewEncapsulation.None,
  'styleUrls': ['assets/css/post.css']
})

export class PortfolioDetailComponent implements OnInit {
  public post;
  public categories;
  public active = 0;

  constructor(
    private _portfolioService: PortfolioService,
    private _http: Http,
    private _router: Router,
    private _segment: RouteSegment,
    public helper: Helper
  ) {
  }

  ngOnInit() {

    let slug = this._segment.getParam('slug');

    this._portfolioService.getPost(slug)
      .subscribe(data =&gt; this.post = data);

    this._portfolioService.getCategories()
      .subscribe(data =&gt; this.categories = data);
  }

  setActive(i) {
    this.active = i;
  }
}
</code></pre>

<p><strong>Slider Component</strong></p>

<pre><code>import { Component, ViewEncapsulation } from '@angular/core';
import {Http, HTTP_PROVIDERS} from '@angular/http';
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { withType } from '../../Services/withType.pipe';

import { PortfolioService } from './portfolio.service';

@Component({
    'selector': 'slider',
    'templateUrl': '/api/templates/PostComponent.slider',
    'pipes': [ withType ]
})

export class SliderComponent {
  constructor() {
    // How do I obtain "this.post" from PortfolioDetail Component
  }
}
</code></pre>

<p><strong>portfolio detail template</strong></p>

<pre><code>&lt;div class="container"&gt;
  &lt;article class="post-content" itemscope itemtype="http://schema.org/Article"&gt;
    &lt;header class="page-head"&gt;
      &lt;h1 itemprop="headline"&gt;@{{ post?.title }}&lt;/h1&gt;
      &lt;h5 class="published" *ngIf="post != null"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt; @{{ helper.dateObject(post?.published_at) | date }}&lt;/h5&gt;

      &lt;ul&gt;
        &lt;li *ngFor="let categorie of post?.categories"&gt;
          &lt;a [routerLink]="['/blog/categorie/', categorie.slug]"&gt;@{{ categorie.name }}&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/header&gt;

    &lt;div class="body" itemprop="articleBody"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-md-6" *ngIf="post != null"&gt;

          &lt;slider&gt;&lt;/slider&gt; &lt;!-- the slider selector --&gt;

        &lt;/div&gt;

        &lt;div class="body col-xs-12 col-md-6 sticky-content" [innerHTML]="post?.content"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/article&gt;
&lt;/div&gt;
</code></pre>

<p><strong>slider template</strong></p>

<pre><code>&lt;div class="gallery" *ngIf="(post.images | withType:'gallery').length &gt; 0"&gt;
  &lt;ul class="gallery-items clearfix"&gt;
    &lt;li *ngFor="let image of (post.images | withType:'gallery'); let current = index" [ngClass]="{active:(current == active)}"&gt;
      &lt;img alt="@{{ image.alt }}" src="media/640/@{{ image.file }}" width="640" /&gt;
    &lt;/li&gt;
  &lt;/ul&gt;

  &lt;ol class="gallery-nav" *ngIf="(post.images | withType:'gallery').length &gt; 1"&gt;
`     &lt;li *ngFor="let image of (post.images | withType:'gallery'); let i = index" [ngClass]="{active:(i == active)}" (click)="setActive(i)"&gt;
      &lt;img alt="@{{ image.alt }}" src="media/250/@{{ image.file }}" width="100" /&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;
</code></pre>