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;
        });
}

由于数据是异步获取的，因此组件将被实例化并呈现，并且仅在接收到该数据之后。 View会被数据填充并最终看起来不错，但起初我在控制台中出错：

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中收到服务数据之前延迟组件实例化？

2 个答案: