2016-04-13 96 views
0

我正在使用兩個並行angular2組件,並試圖在單擊組件1時更新組件2中的數據。如何更新angular2中的組件之間的事件數據?

下面的代碼:

共享服務:

class updateData { 
    constructor(){ 
    this._req = {}; 
    this.observer; 
    this.updateReq = new Rx.Observable(function (observer) { 
       return this.observer = observer; 
    }).share(); 
    } 
    update(req) { 
    this._req = req; 
    this.observer.next(req); 
    } 
}; 

組分1:

app.getLogs = ng.core.Component({ 
    selector: 'get-logs', 
    providers: [updateData, ng.http.HTTP_PROVIDERS, httpService], 
    template: "<button class='btn btn-success pull-left mrT2' (click)='getLogfilters()' >Get Logs</button>" 
    }) 

    .Class({ 
    constructor: [updateData,ng.http.Http, httpService, function (updateData, http, service){ 
     this.result = {}; 
     this.http = http; 
     this.service = service; 
     this.updateData = updateData; 
     this.reqBody = {}; 
    }], 

    getLogfilters: function(){ 
     var fed = (function(){ 
     return this; 
     }).bind(this); 

     setTimeout(function(){ 
     var self = fed(); 
     self.service.getLogs(req, selectedCompany).subscribe(function(result){ 
      this.result = JSON.parse(result._body); 

      //--------- UPDATE DATA HERE--------------// 
      self.updateData.update(req); 

     }.bind(this), function(error){ 
      error = JSON.parse(error._body); 
      console.log(error.code, error.message); 
     }); 

     }); 
    } 
    }); 

組分2:

app.AuditLogs = 
    ng.core.Component({ 
     selector: 'audit-logs', 
     providers: [updateData, ng.http.HTTP_PROVIDERS, httpService], 
     templateUrl: '/public/webapp/ng2/audit_logs/audit-logs.html', 
    }) 
    .Class({ 
     constructor:[updateData,ng.http.Http, httpService, function(updateData, http, service) { 
     this.result = {}; 
     this.http = http; 
     this.logs = []; 
     this.updateData = updateData; 

     // --------- CATCH UPDATED DATA HERE ---------- // 
     this.updateData.updateReq.subscribe(function (req) { 
      console.log(req); 
     }); 
     }] 
    }); 

每當我點擊組件2並嘗試運行此我得到一個錯誤:

"Cannot read property 'next' of undefined".

回答

0

this

this.updateReq = new Rx.Observable(function (observer) { 
      return this.observer = observer; 
}).share(); 

是不是您所期望的原因是什麼

`function (observer)` in 

將其更改爲

(observer) => 

this.updateReq = new Rx.Observable(function (observer) { 
      return this.observer = observer; 
}.bind(this)).share(); 

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

+0

見我沒看得更遠。這可能需要更多的'function()...'。無論如何你通常都想使用'=>'。 –

+0

感謝您的回覆:),我試圖找出答案。 –

相關問題