Question

我正在尝试将http请求与我的组件分开并将其放入服务中，如何将请求中的响应传递给我的组件中的操作？

与角度1类似，您可以在控制器中执行类似下面的代码，并在服务中执行http请求。

var getGenreList = function() {
            coreGenreService.getGenreList(vm.id)
                .then(function(response) {
                     console.log(vm.name);
                });
        }

我试过应用相同的逻辑，但是我不知道如何将响应传递给我的控制器。

服务：

getUser(){
        this.http.get('http://../api/User?email='+this.customerEmail)
            .map(response => response.text())
            .subscribe(data => {
                if (data) {
                    var userObj = JSON.parse(data);
                    this.UserEmail = userObj.EmailAddress;
                }
        });
    }

我可以看到这是获得json objs但是当我进行搜索时我没有在对象中看到任何值，我猜是因为它没有被传递到searchUser()

searchUser() {
    this.isLoading = true;
    if(!this._searchService.getUser()){ 
        setTimeout(() => {
            this.isLoading = false;
        }, 500)
    }
}

Html输入结构：

<input type="text" name="UserEmail" [(ngModel)]="customerEmail" placeholder="Search customer email"> <br>
<button (click)="UserCustomer()" class="omni-btn search-btn float-shadow">Search</button>

Answer 1

您需要以这种方式重构您的服务：

getUser(customerEmail: string): Observable<string>{
    return this.http.get(`http://../api/User?email=${customerEmail}`)
        .map(response => response.json());
}

在您的组件中，您可以像这样调用服务：

searchUser() {
  this.isLoading = true;
  this._searchService.getUser(this.customerEmail)
    .subscribe(user => { 
      this.isLoading = false;

      // To use for data binding in the component
      this.user = user;

      console.log('user = ', user);
  });
}

angular2服务传递对组件的响应

1 个答案: