Question

我有一个从服务器检索数据的简单组件。

@Component({
  selector: 'app',
  template: `
  <h1>HEllo {{category}}</h1>
  `,
  providers: [
    HTTP_PROVIDERS,
    CategoryService
  ]
})
export class App implements OnInit {
  private category;
  constructor(private _categoryService: CategoryService){}
  ngOnInit() {
    this._categoryService.getCategories().subscribe(categories => this.category = categories.name);
  }
}

我的服务看起来像

@Injectable()
export default class CategoryService {
  constructor(private http: Http){}

  private _categoriesUrl = 'http://localhost:3000/api/photo';
  getCategories() {
    return this.http.get(this._categoriesUrl)
                    .map(res => return res.json().data;)
                    .do(data => console.log(data))
                    .catch(this.handleError);
  }

  private handleError(error: Response) {
    return Observable.throw(error.json().error || 'Server error');
  }
}

当我在客户端渲染它时效果很好但是当我使用angular2-universal-preview在服务器端渲染它时会抛出错误

XMLHttpRequest is not defined

我怎样才能使它与服务器端渲染一起工作？

Answer 1

您需要添加

  providers: [
    NODE_HTTP_PROVIDERS,
    CategoryService
  ]

另见https://github.com/angular/universal/issues/292

我认为最好将NODE_HTTP_PROVIDERS添加到bootstrap(AppComponent, [NODE_HTTP_PROVIDERS])而不是每个（或某些组件），除非您有充分的理由为每个组件请求Http的不同实例

使用angular2服务器渲染时如何从休息服务获取数据

1 个答案: