ルート変更時にコンテンツ全体の再ロードを停止します

Question

私は次のようなルートを持っています：page/:id、ここではそれぞれidの異なるコンテンツを読み込みます。ただし、別のページに移動するたびに、コンテンツ全体がリロードされます。私は、APIから来るデータだけをリロードしたいと思います。

ナビゲーション：

<ul> 
<li [routerLink]="['/page', 1]">Page 1</li> 
<li [routerLink]="['/page', 2]">Page 2</li> 
<li [routerLink]="['/page', 3]">Page 3</li> 
</ul> 

テンプレート： <h1 *ngIf="data">{{data.name}}</h1>

コンポーネント：

export class DataComponent implements OnInit { 

    data: any; 
    error: any; 

    constructor(
    private route: ActivatedRoute, 
    private service: DataService 
) {} 

    ngOnInit() { 
    this.getData(); 
    } 

    getData() { 
    this.service.getData() 
     .subscribe(
     res => this.data = res, 
     error => this.error = error 
    ); 
    } 

} 

あなたはこのPlunkerに行けば、あなたはたびにルート変更を黒の四角形が点滅が表示されます。理想的には、黒い部分は元のままで、内部のデータだけが変更されます。

このちらつき現象は、私がHTTPコールを使用している場合にのみ発生することに気付きました。もし私がそのコンポーネントに他のものを持っていたら、ルートを変更するときにはこれは起こりません。

これを解決する方法はありますか？

EDIT：Here's a Plunkr予想される動作を示します。しかし、私は元のROUTER_DIRECTIVESを使用していましたが、現在は廃止されています。

Answer 1

@ Robの答えを広げて、私はResolveガードを使ってこの問題を解決しました。しかし、私は実装でいくつかの間違いを犯していました。

私はルートを初期化する前にHTTPコールを解決する新しいdata-resolveを作成しました：

@Injectable() 
export class DataResolve implements Resolve { 

    constructor(private service: DataService, private router: Router) {} 

    resolve(route: ActivatedRouteSnapshot): 
    Observable<any> | Promise<any> | any { 
     return this.service.getData().then(data => { 
     if (data) { 
      return data; 
     } else { 
      this.router.navigate(['/page/1']); 
     return false; 
     } 
    }); 
    } 
} 

その後、私は自分のモジュールのプロバイダにそのサービスを追加する必要：

providers: [DataService, DataResolve]

また、経路をロードする前に経路を教えてください。

その後

、私は、データを得るために、私のコンポーネントで使用できる配列を持っています：

this.route.data.forEach((data: {pages}) => { 
    this.data = data.pages; 
}); 

私も作業例と私のPlunkerを更新しました。

Answer 2

既にAPIからのコンテンツのみをリロードしています。 h1とh1がスタイリングしているため、ブラックボックスがちらついています。すべてのページのボックスがある場合は、AppComponentのテンプレートに移動します。

<div class="box"> 
    <router-outlet></router-outlet> 
</div> 

そしてむしろh1より.boxセレクタにスタイルを移動します。

もう1つの問題は、コンテンツが削除されて更新されている間、ボックスの高さが崩壊して拡大することです。あなたのルートで解決ガードを使用してこれを修正することができます。あなたが移動すると、DataComponentが破壊され、再ビルドため

https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard

Answer 3

あなたの点滅が発生していますが、*ngIf="data"との表示をブロックするため、新しいデータがサーバーから到着するまで、それを表示することができません。 On this plunker、問題を明白にするためにサーバーの応答に1秒の遅延を追加しました。 DataComponentだけが点滅することに注意してください。残りのPagesComponentは残りません。

On this plunkerは、データがハードコードされているため、目に見える点滅がないため、サーバーの応答を待つことはありません。

点滅を軽減するには、*ngIfを使用しないでください。これは、DOMから要素を完全に削除するためです。 On this plunkerでは、サーバからデータが到着するのを待つ間も点滅は発生しません。

基本的に、データが到着するまで要素を非表示にする限り、コンポーネントが再初期化されるたびに点滅します。