从服务访问组件

Question

In angular 2, is it possible to access the calling component (component that is calling the service) from the service?

Let's say my component is:

@Component({
    selector: 'my-component',
    templateUrl: 'myTemplate.html',
    providers: [Service]
})

export class MyComponent{

    constructor(private service:Service) {
        service.accessComponent();
    }

    callMe(){
        console.log('hello');
    }
}

And my service would be:

@Injectable()

export class Service{
    accessComponent(){
        var myComponent = ???;

        myComponent.callMe();
    }
}

Answer 1

this is wrong to call component from service. you shuold call service in component! this is architecture of angular 2. read this

Service:

 @Injectable()

    export class Service{
        accessComponent(){

    alert('Hi!')

        }
    }

Component:

 @Component({
        selector: 'my-component',
        templateUrl: 'myTemplate.html',
        providers: [Service]
    })

    export class MyComponent{

        constructor(private service:Service) {
            service.accessComponent(); //and you see alert!
        }


    }

Answer 2

To achieve that, you could create Subject in service and emit next on it in the service.

Then subscribe to the subject in your component, calling the method once stream will emit the value.

Answer 3

First of all, you should not use addEventListener , because to handle click, angular2 has it's own way to do that - <div (click)="calledFunc()"></div> . It is idiomatic way to add click event in angular2. (According to comment discussion)