Angular 2 - 组件内部的路由

Question

昨天我问了一个关于角度2路由的另一个特定问题的问题，答案对我来说是令人满意的Angular 2 — navigate through web pages without reloading a component that is common for those pages。但是当我回过头来检查这些东西时，我又遇到了一个问题。这是该应用的新版本：http://ivan-khludov.com/。如果我希望私有部分的页面具有共享组件（在我的示例中为计数器），每次我使用该部分导航时不重新加载它，同时在不同页面显示不同的组件，该怎么办 - 私人/仪表板上的仪表板组件和私人/收件箱中的收件箱组件？是否可以不重新加载计数器并且不将计数器的最后一个值存储在内存中？这是应用程序和根模块的入口点：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ROUTES } from './routes';

import { AppWrapper } from './components/app-wrapper';

import { PublicSection } from './components/public';
import { PrivateSection } from './components/private';

import { Counter } from './components/counter';

import { Dashboard } from './components/private/dashboard';
import { Inbox } from './components/private/inbox';




@NgModule({

  imports: [
    BrowserModule,
    CommonModule,
    HttpModule,
    RouterModule.forRoot(ROUTES)
  ],
  declarations: [
    AppWrapper,
    PublicSection,
    PrivateSection,
    Counter,
    Dashboard,
    Inbox
  ],
  providers: [
  ],
  bootstrap: [ 
    AppWrapper
  ]

})

class RootModule {}

platformBrowserDynamic().bootstrapModule(RootModule);

路由：

import { Routes } from '@angular/router';

import { AppWrapper } from '../components/app-wrapper';

import { PublicSection } from '../components/public';
import { PrivateSection } from '../components/private';




export const ROUTES: Routes = [

  {
    path: '',
    redirectTo: '/public/1',
    pathMatch: 'full'
  },
  {
    path: 'section-1',
    redirectTo: '/public/1',
    pathMatch: 'full'
  },
  {
    path: 'public/:page',
    component: PublicSection
  },
  {
    path: 'private',
    redirectTo: '/private/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'private/:page',
    component: PrivateSection
  }

];

私人部分组件：

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';




@Component({
  selector: 'private',
  template: `
  <h2>Private section — {{page}}</h2>
  <counter></counter>
  <dashboard></dashboard>
  <inbox></inbox>
  `
})

export class PrivateSection {

  private page: string;
  private sub: any;

  constructor(

    private route: ActivatedRoute

  ) {

  }

  ngOnInit() {

    this.sub = this.route.params.subscribe(params => {
       this.page = params['page'];
    });  

  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

仪表板组件：

import { Component } from '@angular/core';




@Component({
  selector: 'dashboard',
  template: `
  <div>dashboard text: lorem ipsum</div>
  `
})

export class Dashboard {

}

收件箱组件：

import { Component } from '@angular/core';




@Component({
  selector: 'inbox',
  template: `
  <div>inbox text: dolor sit amet</div>
  `
})

export class Inbox {

}

提前感谢您的回答。