Question

我们有一个使用angular / cli的简单Angular Universal应用程序：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 - 如何手动触发从服务器端到客户端视图的状态更改？

1 个答案: