Angular2 - two components with the same route

Question

In angularJS ui-router allows us to use 2 components with the same route using states (like in this example Angular UI Router: Different states with same URL?).

Is it possible to achieve the same behaviour in angular2? If it is could you link/provide some examples or workarounds?

The use case here would be something similar to Facebook or Twitter where the URL stays the same but the content changes depending on if you are logged in or not.

So far the only way I can think off to achieve this is using *ngIf in the 'parent' template to select selector of one of the two 'children' components. Something like this:

<home-logged-in *ngIf="authenticated()"></home-logged-in>
<home-logged-out *ngIf="!authenticated()"></home-logged-out>

Are there any recommended ways to do this?

Thanks

Answer 1

You can have routes with parameters like

/article/:id/detail

Where /article/123/detail and /article/abc/detail lead to the same component.

See for example this tutorial https://angular.io/docs/ts/latest/tutorial/toh-pt5.html (Search for "Configure a Route with a Parameter")