角度ユニバーサル - サーバー側からクライアントビューへの状態変更を手動でトリガーする方法

Question

angle/cli：1.4.3 （ノード：6.9.5）を使用した簡単なAngular Universalアプリがあります。

サーバーサイドビューを構成することができます。 domが準備完了すると、クライアントビューに切り替わります。しかし、APIから必要なすべてのデータを収集する前に切り替えが行われます。したがって、データのないページが表示されたときは、スイッチの直後に瞬間があります。

2つの状態の間で手動でスイッチをトリガする方法はありますか？この場合、APIからの応答を取得した後にクライアントビューを表示する必要があります。

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Response, Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { ActivatedRoute, Router } from '@angular/router'; 

@Component({ 
    selector: 'home', 
    templateUrl: 'home.component.html', 
    styleUrls: [ 
     './styles/glh.css' 
    ] 
}) 
export class HomeComponent implements OnInit{ 
    public hotel: any; 
    public id: number = null; 

    constructor(
     public http: Http, 
     private route: ActivatedRoute 
    ) { 
    } 

    ngOnInit() { 
     this.route.params.subscribe((params: any) => { 
      this.id = params.id; 
      if(this.id) { 
      this.getHotel(this.id).subscribe(hotel => { 
       this.hotel = hotel; 
      }); 
      } 
     }); 
    } 

    private getHotel(hotelId: number): Observable<any> { 
     return this.http.get(`https://api.example.com/v1/example/${hotelId}`) 
      .map(this.extractData) 
      .map((data: any) => { 
       return data; 
      }); 
    } 

    protected extractData(res: Response) { 
     return res.json() || { }; 
    } 
} 

ありがとう：

は、ここでは、このために作られた簡単な例です！

Answer 1

Angular'sルートリゾルバを使用すると、瞬きを避けることができます。詳細については、Angular Routing docsを参照してください。

レゾルバでデータを取得した場合、データが既に存在する場合、Angularはコンポーネントにルーティングして初期化します。スイッチはすべてが初期化された後に行われるので、まったくスムーズで瞬きもありません。