Mauricio,
Poderia ficar algo assim:
Service:
my-service.service.ts
import { Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class MyServiceService {
public myEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
}
No serviço, é criado uma variável pública, que nesse caso é um emissor de eventos. Por ser um emissor de eventos, qualquer component que injete o serviço é capaz de se inscrever nela.
Components:
my-component.component.ts
import { Component, OnInit } from '@angular/core';
import { MyServiceService } from '../my-service.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myVar: boolean;
constructor(private _myService: MyServiceService) { }
ngOnInit() {
this._myService.myEmitter.subscribe(data => this.myVar = data);
}
mudarValor() {
this._myService.myEmitter.emit(true);
}
}
No component, é injetado o serviço myServiceService, onde está a variável criada.
No ngOnInit(), estamos se inscrevendo na variável myEmitter criada no myServiceService, e toda vez que algo for emitido por essa variável, o valor emitido será passado para a variável local myVar.
A função mudaValor() se utiliza da variável myEmitter para emitir uma informação para todos que estiverem inscritos nesta variável.
my-component.component.html
<button (click)="mudarValor()">Mudando o valor do myEmitter para true</button>
<p>Valor da variável myEmitter é: {{ myVar }}</p>
No template, é possível ver o valor da variável myEmitter sendo modificado.
my-component2.component.ts
import { Component, OnInit } from '@angular/core';
import { MyServiceService } from '../my-service.service';
@Component({
selector: 'app-my-component2',
templateUrl: './my-component2.component.html',
styleUrls: ['./my-component2.component.css']
})
export class MyComponent2Component implements OnInit {
myVar: boolean;
constructor(private _myService: MyServiceService) { }
ngOnInit() {
this._myService.myEmitter.subscribe(data => this.myVar = data);
}
mudarValor() {
this._myService.myEmitter.emit(false);
}
}
No component my-component2.component.ts, é feito a mesma rotina que o my-component.component.ts, só passando um novo valor para o myEmitter.
my-component2.component.ts
<button (click)="mudarValor()">Mudando o valor do myEmitter para false</button>
<p>Valor da variável myEmmiter é: {{ myVar }}</p>
Funciona da mesma forma que o template do my-component.component.html.
