Почему мой объект-компонент не обновляется сам, когда что-либо в моей глобальной общей службе обновляется? Angular

Question

У меня есть эта служба:

    export class RecipeService{
    
        selectedRecipe: Recipe = 'xyz';
    }

У меня есть этот компонент, использующий эту службу:

    export class RecipesComponent implements OnInit {
    
      selectedRecipe: Recipe;
    
      constructor(private recipeService: RecipeService) { }
    
      ngOnInit(): void {
        this.selectedRecipe = this.recipeService.selectedRecipe;
      }
    
    }

Служба определена в app.module.ts для внедрения, что означает, что все компоненты получают тот же экземпляр.

Мой вопрос в том, что всякий раз, когда я обновляю переменную selectedRecipe в одном из моих компонентов, она не обновляется в других компонентах, хотя на нее есть ссылки, и поэтому я ожидаю немедленных изменений.

Что я делаю не так?

Answer 1

Я погуглил и узнал в одном из постов, что это из-за моего объекта. Объект (Recipe) в моем сервисе содержит примитивный тип, то есть string. Если ваш объект содержит примитивный тип, он не передается в качестве ссылки, следовательно, изменение объекта службы не будет отражено в компоненте, потому что теперь они другие.

Хотя я должен это прояснить в случае array, он работал отлично, даже когда мой массив содержал объекты с примитивными типами. Изменения все же были отражены.

Answer 2

Он не обновляется, потому что новое значение не «отправляется» уже инициированным angular компонентам.

Вместо этого вы должны использовать наблюдаемые.

например:

/* service */
private recipe = "xyz";
public recipeSubject: BehaviorSubject<string> = new BehaviorSubject(this.recipe);

// when changing the recipe
recipeSubject.next(this.recipe);

/* component */
this.service.recipeSubject.subscribe(res => this.recipe = res);