title: Pass Data using Observable and Subscriber with routes in Angular 2
body: <p>I have a angular 2 app and I'm using route to navigate between the component. To pass the data between the sibling component I'm using Observable and Subscription pattern. But how to send data with routing(I need to pass object)</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>@Component({
   providers: [DataShareService]
  })
  ....
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>DataShareService</strong></p>
  
  <pre><code> export class DataShareService {
      // Observable string sources
      private dataSource = new Subject&lt;any&gt;();
      private createdPostSource = new Subject&lt;any&gt;();
  
      // Observable string streams
      dataSource$ = this.dataSource.asObservable();
      createdPostSource$ = this.createdPostSource.asObservable();
      // Service message commands
      passData(data: any) {
       this.dataSource.next(data);
      }
  
      passCreatedPostSource(data:IPost[]){
       this.createdPostSource.next(data);
      }
  
    }
  </code></pre>
  
  <p><strong>PostListComponent</strong></p>
  
  <pre><code>@Component({
    selector: 'app-post-list',
    templateUrl: './post-list.component.html',
    styleUrls: ['./post-list.component.css']
  })
  export class PostListComponent implements OnInit {
  
    private _postUrl: string;
    public posts: IPostList;
    public createPost: string;
    private dataSub: Subscription;
  
    constructor(private _postService: PostService,
                private _config: ConfigService,
                private  _logger: ErrorLogService,
                private _dataShareService: DataShareService,
                private _router: Router) {
    }
  
  
    ngOnInit(): void {
      this._postUrl = this._config.get('postApiRoot');
  
      this._postService.getPosts(this._postUrl)
        .subscribe(
          result =&gt; this.posts = result,
          error =&gt; this._logger.logError(error)
        );
      this.dataSub = this._dataShareService.createdPostSource$
        .subscribe(post =&gt; {
          this.posts.result.unshift(post);
          console.log(this.posts.result);
        });
    }
  
    createResponse(post): void {
      this._dataShareService.passData(post);
      console.log("postlist:" + post);
    }
  
    ngOnDestroy(): void {
      this.dataSub.unsubscribe();
    }
  }
  </code></pre>
  
  <p>link in html </p>
  
  <pre><code> &lt;a [routerLink]="['/post',post.id]" (click)="createResponse(post)"&gt;{{post.title}}&lt;/a&gt;
  </code></pre>
  
  <p><strong>post-detail.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'app-post-detail',
    templateUrl: './post-detail.component.html',
    styleUrls: ['./post-detail.component.css']
  })
  export class PostDetailComponent implements OnInit {
  
    private _postDetailPath: string;
    private dataSub: Subscription;
    private _post: IPost;
  
    constructor(private _router: Router,
                private _route: ActivatedRoute,
                private _config: ConfigService,
                private _dataShareService: DataShareService,
                private _logger: ErrorLogService) {
  
    }
  
    ngOnInit() {
      this.dataSub = this._dataShareService.dataSource$.subscribe(
        post =&gt; {
          this._post = post;
          console.log('post : ' + this._post);
        }, error =&gt; {
          console.log('errr0');
          this._logger.logError(error);
        },() =&gt; {console.log('post : error' )});
  
    }
  
    onBack(): void {
      this._router.navigate(['/posts'])
    }
    ngOnDestroy() {
      this.dataSub.unsubscribe();
    }
  
  }
  </code></pre>
  
  <p>unable to get the data in ngOnInit() of post-detail after redirect.</p>
  
  <p>How does this works? If i don't you routing its works. but how to made it work with routing?</p>