0

我有一个要求ngOnInit，我从 URL 中提取查询参数，准备一个 url 用于进行后端api调用，http://localhost:8080/myapp/video0=5&video1=6并发出接收到的数据以在其他组件中使用。

现在，当我查看浏览器控制台和网络选项卡时，我看到对我的后端 api 的两个调用：一个没有参数，一个有参数。显然，带有参数的参数可以获取我想要的数据。这data需要在另一个组件中进行进一步处理。

以下是ngOnInit一个组件的外观：

ngOnInit() {

this.activatedRoute.queryParams.subscribe((params: Params) => {
     this.video0 = params['video0'];
     this.video1 = params['video1'];
     this.video2 = params['video2'];
     this.video3 = params['video3'];

    this.sharedRequestPath = this.prepareSharedLinkRequestPath(this.video0,this.video1,this.video2,this.video3);  // creates a url for fetching data.

   this.getSharedVideosData(this.sharedRequestPath);  //this makes the backend call.

    this.addVideosEvent.emit(this.sharedVideos); //finally emitting the data populated in variable

 });
}

从后端获取数据的部分：getSharedVideoData

 getSharedVideosData(requestPath) {

  this.modelService.getVideos(requestPath).subscribe(
      data => {
      this.videoData = data;

            for (let j = 0; j < this.videoData.length; j++) {
                          this.sharedVideos[j] = this.videoData[j];
            }
      });  
   }

getVideos中的方法modelService是：

getVideos(videoDataQuery): Observable < MyObj[] > {
    return this.http.get(videoDataQuery).map((response: Response) => {
        return <MyObj[]> response.json()
    }).catch(this.handleError);
}

最后，另一个组件上的发射器事件：

 <app-form (addVideosEvent)="addVideos($event)" ></app-form>

addVideos方法用于进一步处理包含警报语句的数据。当页面加载时，我看到两个警报语句，但都没有任何数据。

这很奇怪，因为浏览器网络选项卡向我显示了响应，但我猜它没有正确发出。我做的正确吗？

我怎样才能做到这一点？

4

2 回答 2

0

只需在 Component 中订阅发出的数据并将其放在您想要的位置。

this.addVideosEvent.subscribe(yourEmittedData=>{
       console.log( 'emittedData' , yourEmittedData )
)
于 2018-05-08T07:48:45.243 回答
0

  • 组件订阅的正确语法是 =>

    this.addVideosEvent.subscribe(yourEmittedData=>{
    console.log( 'emittedData' , yourEmittedData )
})

  • 服务订阅的正确语法是 =>

     myFunction(callback:(data:any)=>void){
    this.addVideosEvent.subscribe((yourEmittedData:any)=>{
       console.log( 'emittedData' , yourEmittedData )
       callback(yourEmittedData);
    })
 })
于 2018-05-09T13:06:26.760 回答