如何延迟组件实例化，直到在 Angular 2 中收到来自服务的数据？

Question

我有一项服务使用其 get 方法从服务器获取数据：

export class UserService implements IRestService<User> {
    constructor(public http: Http) {
    }

    get(): Rx.Observable<User> {
        return this.http.get('api/ui_user', <any> {
            headers: {'Accept': 'application/json'}
            })
            .toRx()
            .map(res => res.json());
    }

我有一个使用此服务的组件。

constructor(emplService: EmployeesService, userService: UserService){
    this.emplService = emplService;
    this.isDisplayMenu = false;
    this.user = new User();

    userService.get()
        .subscribe(usr => {
            this.user = usr;
        });
}

因为数据是异步获取的，组件被实例化和渲染，并且只有在接收到数据之后。视图填充了数据并且最终看起来不错，但起初我在控制台中遇到错误：

GET data:image/png;base64,undefined net::ERR_INVALID_URL

它发生在我看来：

 <img class="user-avatar" [src]="'data:image/png;base64,' + user.avatar">

我希望组件在呈现自身之前等到接收到数据。这可能吗？我在考虑 lifecycle hooks，但文档太差了，我看不懂。

Answer 1

一种方法是使用 ngIf 指令。

类似...

<img *ngIf="user.avatar" class="user-avatar" [src]="'data:image/png;base64,' + user.avatar">

然后该元素将不会在页面中呈现，直到 user.avatar 为真。

Answer 2

之前的答案是正确的，但还有另一种选择。要延迟加载您的组件，直到某些服务得到解决，您可以使用 Resolvers.

这里有一些 good blog post 描述了实现一个。

基本上，在 promise/observable 内部解析器被解析之前，指定了解析器的组件不会加载。

如何延迟组件实例化，直到在 Angular 2 中收到来自服务的数据？

How to delay component instantiation until data from service is received in Angular 2?

web-component

typescript

angular