Angular2 Routing: persisting route tabs and child routes
<p>Angular Community!</p>

<p>I'm currently rewriting AngularJS app to Angular 2. I want to solve problem which could be described as: route tabs + child routes.</p>

<p>So, basically Router in Angular 2 destroys inactive components (my tabs!). The problem is I don't want this behaviour. Reason is I have some components like charts and data grid and want to switch between them fast, I don't want to recreate them.</p>

<p>I have found some <strong>workaround</strong> to persist my tabs while having routes but using this approach I don't know <strong>how</strong> to implement <strong>child routes</strong>. I'd like to also have a solution depth-independent (meaning: working more levels deeper) because I have more subtabs that need to be persisted.</p>

<p>The workaround is: I have put some empty component to routes and instantiate tabs myself hiding them with <code>[hidden]</code> property:</p>

<p>app.ts:</p>

<pre><code>@Component({ /*...*/ })
@RouteConfig([
    {path: '/**', redirectTo: ['Dashboard']},

    {path: '/dashboard', name: 'Dashboard', component: EmptyRoute},
    {path: '/products/...', name: 'Products', component: EmptyRoute},
    {path: '/sales', name: 'Sales', component: EmptyRoute},
    {path: '/reports', name: 'Reports', component: EmptyRoute},
])
export class App {
    constructor(private router: Router) {
    }

    public isRouteActive(route) {
        return this.router.isRouteActive(this.router.generate(route))
    }
}
</code></pre>

<p>app.html:</p>

<pre><code>&lt;dashboard [hidden]="!isRouteActive(['/Dashboard'])"&gt;&lt;/dashboard&gt;
&lt;products-management [hidden]="!isRouteActive(['/Products'])"&gt;&lt;/products-management&gt;
&lt;sales [hidden]="!isRouteActive(['/Sales'])"&gt;&lt;/sales&gt;
&lt;reports [hidden]="!isRouteActive(['/Reports'])"&gt;&lt;/reports&gt;
</code></pre>