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

问题描述：

我刚刚开始玩角度2，我遇到了一个小问题，我搜索了各种形式和angulars文档。Angular 2将ajax调用响应转移到另一个组件

我设法做了一个调用服务，然后我想在一个组件中，当我按下一个按钮加载另一个组件与dynamicload组件，并有权访问ajax结果。

的问题是，我可以T弄清楚如何做到这一点..

的问题是，如何才能让结果使用观测量或承诺方法的其他组件入店。

答

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

我希望这张图片能够为你澄清这种情况下的数据流。

根组件调用返回给你承诺对象服务的方法。
然后将响应中所需的数据映射到根组件模型内的根组件模型构造函数中。

并且您的子组件应该预订您在上一步中准备的模型。

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

}

正上方如何在根组件从承诺对象设置模式向局部模型短的例子。

最新研究：

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

希望它能帮助你，让我知道你是否需要额外的信息！

Mikki谢谢，但我可以在另一个组件不是儿童组件吗？他们是无关的，一个注入另一个槽dynamiccomponentload .. –

@Obretin我不知道你的架构，有点难以理解为什么你需要这种情况下，如果你在哪里使用ng1，我会说你应该使用'event broadcasting'但是ng2正在使用更严格的数据流概念。因此，您可以尝试从父组件调用服务，或者可能提供更多详细信息，并且我会帮您高兴:) – Mikki

以及我可能做错事情的东西，但我在页面顶部有一个搜索框，以及何时我按下提交按钮我想要在页面中间加载另一个组件（或者从一开始就加载它），并且在从API接收到答案后，用答案填充组件模板。事情是，如果我打电话的组件呈现，但没有阿贾克斯电话..如果您有任何意见，请告诉我..有点新的整个角2东西 –

答

只需创建一个服务，然后在需要的地方注入服务。这是一个例子，如何要共享许多组件服务AJAX的数据，而不发出请求两次： https://*.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); 
     } 
    } 
}

一个完整的工作示例/猛击可以在这里找到：http://plnkr.co/edit/TR7cAqNATuygDAfj4wno?p=preview

坦克@tibs，但我已经做到了这一点..它现在是我在找什么..顺便说一句，我看到有一百万种方法可以做到这一点 –

让我们说你有一种形式，当submited调用API响应，然后结果必须转到另一个组件，将使用响应 –

即使在这个来自plunker的例子中，我如何处理模板中的* ngFor中的响应 –

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

相关推荐