Я пытаюсь обмениваться данными между одноуровневыми компонентами и делаю это через общую службу. Когда первый компонент загружается, он получает список серверов из моего API и заполняет поле выбора всеми полученными серверами. Теперь я хочу уведомить другой свой компонент, когда пользователь выбрал новый сервер, чтобы я мог отобразить его подробности.
Это моя услуга:
@Injectable()
export class DashboardService {
servers: Server[] = [];
selectedServer = new BehaviorSubject<Server>(null);
setServers(servers: Server[]) {
this.servers = servers;
}
}
Компонент с полем выбора:
@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);
}
}
Компонент детали:
@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;
});
}
}
Когда я выбираю новый сервер, метод change () вызывается правильно, но выдает следующую ошибку в консоли:
ОШИБКА Тип: Ошибка: _this.dashboardService.selectedServer.next не является функцией в ServersSelectComponent.change (servers-select.component.ts: 39)
Подписка, кажется, уже работает, так как я получаю «nulllalalal» в моей консоли. Что мне не хватает?
РЕДАКТИРОВАТЬ: - Я использую angular 5 и rxjs 5.5.2 - В моем DashboardService я импортирую BehaviorSubject следующим образом:
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
selectedServer: BehaviorSubject<Server> = new BehaviorSubject(null);
- person   schedule 20.12.2017