Angular2 在服务和组件之间同步答案

【问题标题】：Angular2 sync up between service and ComponentAngular2 在服务和组件之间同步
【发布时间】：2018-02-14 11:25:56
【问题描述】：

我有一个“HomeComponent”，它在 UI 中显示用户名。

使用服务从 json 文件中读取用户名。

我在 AppComponent（HomeComponent 的父级）中提供服务并在 HomeComponent 中重用

AppComponent.html

<router-outlet></router-outlet>

AppComponent.ts

export class AppComponent {
constructor(private userService: UserService) {
    this.userService.fetchUserDetails();
}
}

用户服务.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../models/user';

import 'rxjs/add/operator/first';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class AppStateManagerService {
   private userDetails: User;

  private initializeUser(data) {
    this.userDetails = new User();
    this.userDetails.name = data.username;
    this.userDetails.id = data.userid;
   }
constructor(private http: HttpClient) {}

async fetchDeviceDetails() {
    let response = await this.http
        .get('./app/config/user.json')
        .first()
        .toPromise();
    this.initializeUser(response);
    return this.userDetails;
}

getUserDetails() {
    return this.userDetails;
}

}

HomeComponent.html

<div>{{user && user.name}}</div>

HomeComponent.ts

export class HomeComponent {
    user: User;

    constructor(private userService: userService) {
        this.user = this.userService.getUserDetails();
    }
}

我这里遇到的问题是，HomeComponent首先被初始化，在JSON解析完成之前，也就是在AppComponent中fetchUserDetails()完成之前，调用HomeComponent中的getUserDetails()并且user.name为null HTML，在被填充到服务中之前。

有没有办法同步这个？不使用 Observable？

【问题讨论】：

尝试解析路由angular.io/api/router/Resolve
会有些像 {{user.name | async}} 在这里没有帮助，为什么要解决，最好使用它
@RahulSingh，你能澄清一下你上面所说的吗？使用异步？
你返回一个 observable 并在视图中使用异步，这将减少你订阅 observable 的工作量
该方法所做的只是返回对您的列表的引用......所以这不应该很昂贵。它不是每次都从数据存储中重新检索它。它调用的是getUserDetails() 而不是fetchDeviceDetails()（这会更贵。）

标签： json angular angular-services angular-components

【解决方案1】：

fetchDeviceDetails() 是异步的，所以我希望你能同意我的看法，getUserDetails() 将立即返回 undefined。简单的东西对吧？

那么如何解决这个问题：您需要让 HomeComponent 知道数据可用。我们使用 Observables 来做到这一点。一个例子是：

fetchDeviceDetails(): Observable<any> {
  return new Observable(observer => {
    this.http.get(whatever).subscribe(
      res => {
        this.initializeUser(res);
        observer.next(res);
      }
    );    
  });
}

现在你可以订阅这个活动了：

constructor(private userService: userService) {
  this.userService.fetchDeviceDetails().subscribe(
    res => this.user = res
  );
}

【讨论】：

没有可观察的情况下这可能吗？
@keerthee 是的，只是返回一个承诺并在组件中解决它
为什么要避免它？您正在使用异步功能，因此这是一个合乎逻辑的解决方案。
@RahulSingh 这几乎是一样的...... Observables / Promises / Subjects。
@keerthee 好吧...我为您提供了解决方案。不使用它是你的选择。

【解决方案2】：

另一种选择是使用这样的吸气剂：

export class HomeComponent {
    get user(): User {
       return this.userService.getUserDetails();
    }

    constructor(private userService: userService) {  }
}

这利用了 Angular 的更改检测来确保用户数据一可用就在 UI 中设置。

【讨论】：