Angular Сервисы: Изменение одного компонента при нажатии на другой компонент

Question

ладья ie вопрос после застревания в уроке:

• Компонент A - игральная карта с надписью "title"
• Компонент B имеет кнопку "next"
• Компонент C хранит некоторые "карточки" с фиктивными данными в объекте array

При нажатии на кнопку случайный заголовок из массива должен отображаться в Компоненте A (и, в конечном счете, одновременно в компонентах D, E, F, которые все должны подписаться на один и тот же сервис, я полагаю, но давайте начнем с простого).

Что работает: при init / refre sh случайный заголовок карты показан в Компоненте А. Так что общая идея обслуживания работает. Нажав button внутри , компонент позволяет мне снова вызвать getCard() и отобразить другой заголовок. Кроме того, нажатие следующего button в Компоненте B вызывает службы, только . Что не работает , так это то, что Компонент A не знает о вызове службы из Компонента B и не обновите текстовое поле до нового {{title}}.

Я думаю, что я близок к решению, поэтому я был бы признателен, чтобы вы указали мне на недостающую ссылку. Спасибо!

service.ts:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { CARDS } from './../data/mock-cards';

@Injectable({
  providedIn: 'root'
})
export class CardService {

  constructor() { }

  getCard(): Observable<object> {
    var randomCard = Math.floor(Math.random() * CARDS.length);
    return of (CARDS[randomCard]);  
  }   
}

Компонент A (Игральная карта)

import { Component, OnInit } from '@angular/core';
import { CardService } from './../card.service';

@Component({
  selector: 'app-gamecard',
  templateUrl: './gamecard.component.html',
  styleUrls: ['./gamecard.component.scss']
})
export class GamecardComponent implements OnInit {

  card
  title = "";

  constructor(private cardService: CardService) { }

  getCard(): void {
    this.cardService.getCard()
      .subscribe(card => this.card = card);
    this.title = this.card.title;
  }

  ngOnInit(): void {
    this.getCard();
  }    
}

Компонент B (Следующая кнопка)

import { Component, OnInit } from '@angular/core';
import { CardService } from './../card.service';

@Component({
  selector: 'app-controlls',
  templateUrl: './controlls.component.html',
  styleUrls: ['./controlls.component.scss']
})
export class ControllsComponent implements OnInit {

  constructor(private cardService: CardService) {}

  next(): void {
    this.cardService.getCard()
  }

  ngOnInit(): void {
  }
}