Я следую этому уроку:
https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/#sibling-component-ts
Чтобы попытаться установить связь между двумя компонентами.
После этого урока мне удалось передать строки только между компонентами.
Это parent-of-sibling.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-parent-of-sibling',
template: `
<br>
Here's the received message from sibling
<br>
{{message}}
<br>
`, styleUrls: ['./parent-of-sibling.component.css']
})
export class ParentOfSiblingComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}
Это sibling.component.ts:
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-sibling',
template: `
<button (click)="newMessage()">Send message to parent</button>
`, styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
}
newMessage() {
this.data.changeMessage("MESSAGE RECEIVED FROM SIBLING")
}
}
И, наконец, это data.service.ts:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject('default message');
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message);
}
}
Это прекрасно работает, если я передаю строку:
![enter image description here](https://i.stack.imgur.com/aHeta.png)
Когда я пытался сообщить номер, используя тот же код, приложение выдает ошибку.
Итак, вот мои вопросы:
1 / Что является причиной ошибки? (И.Е .: Я знаю, что этот код работает для строк, а не чисел, но почему он работает только для строк?)
2 / Есть ли способ это исправить?
Спасибо!