Как получить доступ к переменной из другой компоненты?

В Angular есть несколько способов получить доступ к переменной из другой компоненты. Я расскажу о двух самых распространенных способах.

1. Использование сервисов и инъекция зависимостей:
- Создайте сервис, в котором определите переменную, к которой вы хотите получить доступ из другой компоненты.
- В компоненте, из которого вы хотите получить доступ к переменной, добавьте зависимость на созданный сервис с помощью инъекции зависимостей.
- В методе компонента, где вам нужно получить доступ к переменной, используйте свойство сервиса для получения значения переменной.

Например, создадим сервис с именем DataService:

   import { Injectable } from '@angular/core';

   @Injectable({
     providedIn: 'root',
   })
   export class DataService {
     public myVariable: string;

     constructor() { }
   }

Затем в компоненте, где вы хотите получить доступ к переменной myVariable, вы должны его инъектировать:

   import { Component } from '@angular/core';
   import { DataService } from 'путь/к/data.service';

   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html',
   })
   export class MyComponent {
     constructor(private dataService: DataService) { }

     public someMethod() {
       // Получение доступа к переменной myVariable из сервиса
       console.log(this.dataService.myVariable);
     }
   }

Теперь вы можете получить доступ к переменной myVariable из сервиса в компоненте MyComponent.

2. Использование Angular Event Emitter (или EventEmitter):
- Создайте EventEmitter в родительском компоненте, где находится переменная.
- Из дочернего компонента, где вы хотите получить доступ к переменной, отправьте значение переменной с помощью EventEmitter.
- В родительском компоненте подпишитесь на событие, чтобы получить доступ к значению переменной.

Например, в родительском компоненте:

   import { Component } from '@angular/core';

   @Component({
     selector: 'app-parent-component',
     templateUrl: './parent-component.component.html',
   })
   export class ParentComponent {
     public myVariable: string;

     public onValueChange(value: string) {
       this.myVariable = value;
     }
   }

В дочернем компоненте:

   import { Component, EventEmitter, Output } from '@angular/core';

   @Component({
     selector: 'app-child-component',
     templateUrl: './child-component.component.html',
   })
   export class ChildComponent {
     @Output() public valueChange: EventEmitter<string> = new EventEmitter<string>();

     public someMethod() {
       const value = 'Some value'; // Значение переменной, к которой нужен доступ

       // Отправка значения переменной родительскому компоненту
       this.valueChange.emit(value);
     }
   }

В шаблоне родительского компонента:

   <app-child-component (valueChange)="onValueChange($event)"></app-child-component>

Обратите внимание на использование события (valueChange) и вызова метода onValueChange($event), где $event содержит значение переменной, отправленное из дочернего компонента.

Теперь в родительском компоненте вы можете получить доступ к значению переменной myVariable, которое было отправлено из дочернего компонента.