How do I pass data to Angular routed components?
<p>In one of my Angular 2 routes's templates (<strong>FirstComponent</strong>) I have a button</p>

<p><strong>first.component.html</strong></p>

<pre><code>&lt;div class="button" click="routeWithData()"&gt;Pass data and route&lt;/div&gt;
</code></pre>

<p>My <strong>goal</strong> is to achieve:</p>

<blockquote>
  <p>Button click -> route to another component while preserving data and without using the other component as a directive.</p>
</blockquote>

<p>This is what I tried...</p>

<p><strong>1ST APPROACH</strong></p>

<p>In the same view I am storing collecting same data based on user interaction.</p>

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

<pre><code>export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}
</code></pre>

<p>Normally I'd route to <strong>SecondComponent</strong> by</p>

<pre><code> this._router.navigate(['SecondComponent']);
</code></pre>

<p>eventually passing the data by</p>

<pre><code> this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);
</code></pre>

<p>whereas the definition of the link with parameters would be </p>

<pre><code>@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]
</code></pre>

<p>The issue with this approach is that I guess <strong>I can't pass complex data</strong> (e.g. an <strong>object</strong> like property3) in-url;</p>

<p><strong>2ND APPROACH</strong></p>

<p>An alternative would be including SecondComponent as <strong>directive</strong> in FirstComponent.</p>

<pre><code>  &lt;SecondComponent [p3]="property3"&gt;&lt;/SecondComponent&gt;
</code></pre>

<p>However I want to <strong>route</strong> to that component, not include it!</p>

<p><strong>3RD APPROACH</strong></p>

<p>The most viable solution I see here would be to use a <strong>Service</strong> (e.g. FirstComponentService) to </p>

<ul>
<li><strong>store</strong> the data (_firstComponentService.storeData()) on routeWithData() in FirstComponent</li>
<li><strong>retrieve</strong> the data (_firstComponentService.retrieveData()) in <strong>ngOnInit()</strong> in <strong>SecondComponent</strong></li>
</ul>

<p>While this approach seems perfectly viable, I wonder whether this is the easiest / most elegant way to achieve the goal.</p>

<p>In general I'd like to know whether I'm missing other <strong>potential approaches</strong> to pass the data between components, particularly <strong>with the less possible amount of code</strong></p>