В принципе, это можно решить при помощи BehaviorSubject:
export class MainComponent implements OnInit {
public orderData$ = new BehaviourSubject<OrderViewModel[]>([]);
ngOnInit() {
this.orderService.getOrders().subscribe(r=>{
this.orderData$.next(r);
});
}
}
<app-yamap [orderData$]="orderData$"></app-yamap>
Дальше идёт приблизительный код компонента YaMap. Я не знаю какая идея стоит за этим компонентом, но хочу показать как он может принимать и изменять данные переданного в него BehaviourSubject.
Контроллер карты:
export class YaMap implements OnInit {
@Input() orderData$: BehaviourSubject<OrderViewModel[]>;
public addOrder(newOrder: OrderViewModel) {
this.orderData$.next([...this.orderData$.getValue(), newOrder]);
}
}
Вью карты:
<order-map-element *ngFor="let order of orderData$ | async">
{{ order.price }}
</order-map-element>
<button (click)="addOrder({price: 14.99})">Add another order</button>
В данном конкретном случае можно вполне обойтись и без BehaviourSubject и вы шли по верному пути с событием (placemarkSelection)="onPlacemarkSelected($event)" (если я правильно вижу ход мысли). Идея в том чтоб компонент app-yamap просто отображал данные [orderData], но не менял их самостоятельно. Данные должны меняться извне по событию от компонента.
Почему лучше постараться обойтись без использования BehaviourSubject? Он усложняет код, делая компонент менее пригодным для переиспользования. Вот замечательный пост Дена Абрамова об "умных" и "тупых" компонентах
https://medium.com/@dan_abramov/smart-and-dumb-com... Эта идея применима ко всем компонентным подходам, не только к Реакту. Старайтесь делать как можно больше тупых компонентов и будете чаще кайфовать от гибкости и расширяемости собственного кода.
