Angular2從服務中調用組件

我想從a Service中調用我的Component中的方法。什麼是正確的方法來做到這一點？我曾嘗試使用rxjs Subject來創建Observable，但我無法啓動它。Angular2從服務中調用組件

import {Subject} from 'rxjs/Subject'; 
    export class MyService { 
     callComponent = function(value) { 

      let invokeEvent = new Subject(); 

      invokeEvent.next({some:value}) 
     } 
    }

，並在我的組件

export class MyComponent { 
    constructor(private _myService: MyService) { 
      this._myService.invokeEvent.subscribe(value => console.log(value)) 
      } 

}

來源

2016-11-03 Rob

我不能得出臨時變量'invokeEvent'在服務和對象'之間的關係this._myService .invokeViewEvent'，你在組件中使用。 –

抱歉錯字。這是我想要聽的invokeEvent。當我調用'callComponent'時，我想讓組件觸發。我被困在觀察對象中。 – Rob

這裏的plunker：http://plnkr.co/edit/WKSurRJMXo5JZOPrwSP5?p=preview

改變你的服務這樣

import {Subject} from 'rxjs/Subject'; 

@Injectable() 
export class MyService { 

    invokeEvent:Subject<any> = new Subject(); 


    callComponent(value) { 
     this.invokeEvent.next({some:value}) 
    } 
}

不要忘記爲它提供在組件

@Component({ 
    selector: 'my-component', 
    template: ` 
    `, 
    providers: [MyService] 
}) 
export class MyComponent { 
     constructor(private _myService: MyService) { 
     this._myService.invokeEvent.subscribe(value => console.log(value)); 
     setTimeout(()=>{ 
      this._myService.callComponent(1); 
     },1000); 
     } 
}

此外，如果您希望此服務成爲全球共享服務，把它（提供）在你的引導程序（舊）或ngModule中，以便它將在整個應用程序中共享相同的單例實例。

來源

2016-11-03 04:45:21 echonax

一些額外的信息是我已經將我的服務方法暴露給了angular2應用程序之外的窗口。所以我可以稱它爲'window.myangular.MyService.callComponent（）'我已經試過在zone.run和detechChanges（）中包裝了。我可以看到，該方法中的調用成功。 – Rob

@Rob我已經更新了我的答案與一個笨拙的先生。我正在刪除我以前的評論。 – echonax

這樣做！問題在於它不喜歡'Component'提供者中的'MyService'：[]'。它只需要它在主要的應用程序模塊。對我來說很奇怪，但非常感謝。 – Rob

您可以在服務中定義Observable，以便您可以訂閱該組件的Observable。

//服務

import { Injectable, Inject } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
@Injectable() 
export class MyService { 
    private notify = new Subject<any>(); 
    /** 
    * Observable string streams 
    */ 
    notifyObservable$ = this.notify.asObservable(); 

    constructor(){} 

    public notifyOther(data: any) { 
    if (data) { 
     this.notify.next(data); 
    } 
    } 

    callComponent(value){ 
    this.notify.next({some:value}); 
    } 
}

//組件

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 

import { MyService } from './my.service'; 
export class MyComponent { 
    private subscription: Subscription; 
    constructor(private _myService: MyService){ 
    } 

    ngOnInit() { 
    this.subscription = this._myService.notifyObservable$.subscribe((value) => { 
     console.log(value); 
    }); 
    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 
}

來源

2016-11-03 04:50:44 ranakrunal9

無法讓這個工作。我組織我的代碼來匹配這個，但仍然沒有去。 – Rob

import {Subject} from 'rxjs/Subject'; 

export class MyService { 

     private invokeEvent = new Subject(); 

     invokeEvent$ = this.missionConfirmedSource.asObservable(); //<<< this is important to declare invokeEvent with asObservable(); 

     callComponent = function(value) { 
      invokeEvent.next({some:value}) 
     } 
} 


export class MyComponent { 
    constructor(private _myService: MyService) { 
      this._myService 
       .invokeEvent$          //<<< subscribe to invokeEvent$ to get the result 
       .subscribe(value => console.log(value)) 
      } 

}

來源

2016-11-03 05:41:51 micronyks

Angular2從服務中調用組件

回答

相關問題