Angular Universal - 如何手动触发从服务器端到客户端视图的状态变化？

Question

我们有一个简单的 Angular 通用应用程序，使用 angular/cli：1.4.3 （和节点：6.9.5）。

我们设法配置服务器端视图。当 dom 准备就绪时，我们切换到客户端视图。但是，在我们从 API 收集到所有需要的数据之前就进行了切换。所以切换后有一个页面显示没有数据的时刻。

有什么办法可以手动触发两种状态的切换吗？ 这种情况下，我们想在收到响应后显示客户端视图 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的路由解析器来避免眨眼。有关详细信息，请参阅 Angular Routing docs。

如果您在解析器中获取数据，Angular 只会在数据已经存在时路由到您的组件（并对其进行初始化）。由于切换是在一切初始化完成后进行的，所以绝对流畅，没有任何闪烁。

Angular Universal - 如何手动触发从服务器端到客户端视图的状态变化？

Angular Universal - How to trigger manually the state change from server side to client view?

angular-universal

angular