Angular 2 — 浏览网页而不重新加载这些页面常用的组件答案

【问题标题】：Angular 2 — navigate through web pages without reloading a component that is common for those pagesAngular 2 — 浏览网页而不重新加载这些页面常用的组件
【发布时间】：2017-03-19 04:50:44
【问题描述】：

您可以在此处找到示例应用：http://ivan-khludov.com/

这是我的根组件：

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

@Component({
  selector: 'root',
  template: `
  <h1>My Dummy Angular App</h1>
  <router-outlet></router-outlet>
  <nav>
    <a routerLink="/section-1/1" routerLinkActive="active">Section 1 - Page 1</a>
    <span>||</span>
    <a routerLink="/section-1/2" routerLinkActive="active">Section 1 - Page 2</a>
    <span>||</span>
    <a routerLink="/section-2/1" routerLinkActive="active">Section 2 - Page 1</a>
    <span>||</span>
    <a routerLink="/section-2/2" routerLinkActive="active">Section 2 - Page 2</a>
  </nav>
  `
})

export class AppWrapper {

}

第 1 节第 1 页的组件：

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

@Component({
  selector: 'secapagea',
  template: `
  <h2>Section 1 - Page 1</h2>
  <countera></countera>
  `
})

export class Section1Page1 {

}

第 1 节第 2 页的内容几乎相同：

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

@Component({
  selector: 'secapageb',
  template: `
  <h2>Section 1 - Page 2</h2>
  <countera></countera>
  `
})

export class Section1Page2 {

}

一个计数器组件：

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

@Component({
  selector: 'countera',
  template: `
  <div>Seconds elapsed: {{this.count}}</div>
  `
})

export class Section1Counter {

    count: number;

    constructor() {

        this.count = 0;

        setInterval(() => {

            this.count ++;

        }, 1000);

    }

}

把我打开的第一页的案例放在该部分。有没有办法在不重新加载计数器的情况下导航到同一部分的第二页？我想为此类导航问题找到一个通用解决方案——它可能不是计数器组件，而是侧边栏导航或部分标题或其他东西。

【问题讨论】：

如果重要的话，这是路由：jsfiddle.net/mgdvLyua

标签： javascript angularjs angular architecture angular-routing

【解决方案1】：

是的，完全有可能编写一个可以处理多个路由的组件，而无需每次都重新构建组件。

如果您创建一个组件来处理所有页面，如使用以下路由定义的那样：

const routes: Routes = [
  { path: 'section-1/:page', component: Section1PageX }
];

您可以订阅路由参数“page”并在您的组件中处理页面更改。这可以防止 Angular2 每次都重新构建页面组件。

@Component({
  selector: 'secapagea',
  template: `
  <h2>Section 1 - Page {{page}}</h2>
  <countera></countera>
  `
})
export Section1PageX {
  private page: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.page = params['page'];
       //handle the page change
    });  
  }

  ngOnDestroy() {
    //unsubscribe when you leave the section
    this.sub.unsubscribe();
  }
}

因此，只有在您离开整个部分时，您的 Section1Counter 组件才会被销毁。

您还可以在我们的博文Angular 2 by Example 中阅读更多相关信息

【讨论】：

【解决方案2】：

如果正确理解问题，我认为您应该简单地将 Section1Counter 组件放在 AppWrapper 组件模板中，并将其从 SectionxPagey 组件中删除。这样，您将使用路由器插座来显示页面，而 Section1Counter 将保持相同的实例。我希望这会有所帮助

【讨论】：

【解决方案3】：

有一个模块 ng2-cache 允许您将组件缓存到本地存储中，并提供缓存规则。我认为它应该可以满足您的需求。

【讨论】：