2角度 - ここでは、それらのページ

Question

のための共通する成分をリロードせずにWebページをナビゲートあなたは例のアプリを見つけることができます：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：セクション1用

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

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

export class Section1Page1 { 

} 

ほぼ同じもので、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); 

    } 

} 

私はセクションの最初のページを開いた場合を置きます。カウンターを再ロードせずに同じセクションの2ページ目に移動する方法はありますか？私はそのようなナビゲーションの問題のための一般的な解決策を見つけたいと思っています。それは、カウンターコンポーネントではなく、サイドバーのナビゲーションやセクションの見出しなどです。

Answer 1

はい、毎回コンポーネントを再構築せずに複数のルートを処理できるコンポーネントを書くことは絶対に可能です。

次のルートに定義されるように一緒にすべてのページを処理するコンポーネント作成する場合：

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

をあなたは、ルートパラメータ「ページ」に加入すると、あなたのコンポーネント内のページの変更を処理することができます。これにより、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

Answer 2

質問を正しく理解していれば、Section1CounterコンポーネントをAppWrapperコンポーネントテンプレートに置き、それをSectionxPageyコンポーネントから削除するだけです。 この方法では、Section1Counterが同じインスタンスのままである間に、ルータのアウトレットを使用してページを表示することができます。 私はこれが助けてくれるといいですか

Answer 3

ローカルストレージにコンポーネントをキャッシュしても、キャッシングのための規則を提供することを可能にするモジュールNG2-キャッシュがあります。私はそれがあなたが探しているものを行うべきだと思います。