[英]Angular2 call a Component from a Service
我试图从Service
调用Component
的方法。 正确的方法是什么? 我尝试使用rxjs Subject
创建一个Observable,但是无法启动它。
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))
}
}
这是the客: 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);
}
}
另外,如果您希望此服务成为全局共享服务,请执行以下操作: 将其放入(提供)您的bootstrap(旧)或ngModule中,以便它将在整个应用程序中共享相同的单例实例。
您可以在服务中定义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();
}
}
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))
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.