Javascript 角度2-元件内部的布线

昨天我问了一个关于angular 2路由的另一个具体问题，答案令我满意。但当我回去检查这些东西时，我又遇到了一个问题。以下是应用程序的新版本：。如果我希望私有部分的页面有一个共享组件（在我的示例中是一个计数器），不要在每次导航该部分时重新加载它，同时在不同的页面上显示不同的组件-私有/仪表板上的仪表板组件和私有/收件箱上的收件箱组件，该怎么办？是否可以不重新加载计数器，也不在内存中存储计数器的最后一个值？这是应用程序和根模块的入口点：

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 {

}

从'@angular/core'导入{Component}；
从'@angular/router'导入{ActivatedRoute}；
@组成部分({
选择器：“private”，
模板：`
专用部分{{page}
`
})
出口级私家车组{
私有页面：字符串；
私人分包商：任何；
建造师(
专用路由：ActivatedRoute
) {
}
恩戈尼尼特（）{
this.sub=this.route.params.subscribe（params=>{
this.page=params['page']；
});  
}
恩贡德斯特罗（）{
此.sub.取消订阅（）；
}
}

仪表板组件：

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 {

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“仪表板”，
模板：`
仪表板文本：lorem ipsum
`
})
导出类仪表板{
}

收件箱组件：

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 {

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“收件箱”，
模板：`
收件箱文本：dolor sit amet
`
})
导出类收件箱{
}

---

提前感谢您的回答。

您可以尝试嵌套子路由。参考这篇文章-谢谢，这是一种魅力。我认为我们不能在一个应用程序中使用多个路由器插座，所以在您回答之前我没有尝试过。请提供并接受答案，或者在问题解决后关闭您的问题。