BehaviorSubject: el siguiente no es una function

Estoy intentando compartir datos entre componentes hermanos y hacerlo a través de un service compartido. Cuando se carga el primer componente, recupera una list de serveres de mi API y rellena un cuadro de selección con todos los serveres recuperados. Ahora quiero notificar a mi otro componente cuando el usuario seleccionó un nuevo server para que pueda mostrar sus detalles.

Este es mi service:

@Injectable() export class DashboardService { servers: Server[] = []; selectedServer = new BehaviorSubject<Server>(null); setServers(servers: Server[]) { this.servers = servers; } } 

Componente con el cuadro de selección:

 @Component({ selector: 'app-servers-select', template: ` <div class="form-group"> <label>Server</label> <select class="form-control" [(ngModel)]="this.dashboardService.selectedServer" (ngModelChange)="change($event)"> <option disabled>-- Select server --</option> <option *ngFor="let server of servers" [ngValue]="server">{{server.Name}}</option> </select> </div>`, styleUrls: ['./servers-select.component.css'], providers: [ServerService] }) export class ServersSelectComponent implements OnInit { servers: Server[] = []; constructor(private serverService: ServerService, private dashboardService: DashboardService) { } ngOnInit() { this.serverService .getServers() .subscribe(s => { this.servers = s; this.dashboardService.setServers(s); console.log(s); }, e => console.log(e)); } // todo: pass to dashboard component public change = (event: any) => { console.log(event); this.dashboardService.selectedServer.next(event); } } 

Componente de detalle:

 @Component({ selector: 'app-server-details', template: ` <section> <div class="form-group"> <label>Description</label> <input type="text" [(ngModel)]="server"> </div> </section> `, styleUrls: ['./server-details.component.css'] }) export class ServerDetailsComponent implements OnInit { private server: Server = null; constructor(private dashboardService: DashboardService) { } ngOnInit() { this.dashboardService.selectedServer.subscribe((value: Server) => { console.log(value + 'lalalal'); this.server = value; }); } } 

Cuando selecciono un nuevo Servidor, el método change () se llama correctamente, pero arroja el siguiente error en la console:

ERROR TypeError: _this.dashboardService.selectedServer.next no es una function en ServersSelectComponent.change (servers-select.component.ts: 39)

La suscripción parece funcionar ya que tengo 'nulllalalal' en mi console. ¿Qué me estoy perdiendo?

EDITAR: – Estoy usando angular 5 y rxjs 5.5.2 – En mi DashboardService, importo BehaviorSubject de la siguiente manera:

 import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

En la plantilla de ServersSelectComponent tienes:

 [(ngModel)]="this.dashboardService.selectedServer" 

Esto anula la propiedad del service selectedServer con un valor de una de las opciones.

Si desea emitir cambios a través de un Asunto RxJS definitivamente no desea utilizar [(ngModel)] y desencadenar el cambio manualmente con (change) oyente de events como (change)="change($event)" .