Question

我刚开始玩角2，我遇到了一个小问题，我已经搜索了各种形式和角度文档。

我设法创建了一个调用的服务，然后当我按下一个按钮来加载另一个带有dynamicload组件的组件并且可以访问ajax结果时，我想要一个组件。

问题在于我无法弄清楚如何做到这一点......

问题是如何使用Observables或Promises方法在其他组件中访问结果。

Answer 1

如果我正确理解了您的问题，那么您正在寻找一种将请求中的数据插入另一个嵌套组件的方法。

我希望此图片能为您澄清此案例的数据流。

您的Root组件正在调用一个为您的promise对象返回的服务方法。
然后将响应中所需的数据映射到根组件构造函数中的组件模型。

您的子组件应订阅您在上一步中准备的模型。

ngOnInit() {
this.dataService.getSomeData()
    .subscribe((data: IData) => {
        this.data = data;
    });

}

以上是一个简短的例子，说明如何在根组件中将模型从promise对象设置为本地模型。

新研究：

还有另一种方法可以通过api中的数据填充组件。您可以使用EventEmitter从服务中发出事件，然后，您可以在创建的组件内部订阅此事件，这样他们就会获得一个数据，每次都会调用该服务。这是第一个答案中这个策略的一个很好的例子。 Service Events

希望它会对您有所帮助，如果您需要其他信息，请告诉我们！

Answer 2

只需创建一个服务，然后将服务注入所需的位置。这里是一个例子，说明如何在多个组件之间共享服务ajax数据，而不需要两次请求： https://stackoverflow.com/a/36413003/2681823

服务：

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

    private _dataObs = new ReplaySubject<request>(1); 

    getData(forceRefresh?: boolean) {
    // On Error the Subject will be Stoped and Unsubscribed, if so, create another one
    this._dataObs = this._dataObs.isUnsubscribed ? new ReplaySubject(1) : this._dataObs;

    // If the Subject was NOT subscribed before OR if forceRefresh is requested
    if (!this._dataObs.observers.length || forceRefresh) {
            this.http.get('http://jsonplaceholder.typicode.com/posts/2')
              .subscribe(
                requestData => {
                  this._dataObs.next(requestData);
                },
                error => this._dataObs.error(error));
        }

        return this._dataObs;
    }
}

组件：

@Component({
  selector: 'child',
  template : `<button (click)="makeRequest()" class="btn">Click me!</button>`
}) 
export class Child {
  constructor(private _dataService: DataService) {  } 

  makeRequest() {
    this._dataService.getData().subscribe( 
      requestData => {
          console.log('ChildComponent', requestData);
      }
  }
}

可以在此处找到完整的示例/ plunker ：http://plnkr.co/edit/TR7cAqNATuygDAfj4wno?p=preview

Angular 2将ajax调用响应转移到另一个组件

2 个答案: