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

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

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

Пример:

   // my-service.service.ts
   import { Injectable } from '@angular/core';

   @Injectable()
   export class MyService {
     private myVariable: string;

     setMyVariable(value: string): void {
       this.myVariable = value;
     }

     getMyVariable(): string {
       return this.myVariable;
     }
   }

   // component1.component.ts
   import { Component } from '@angular/core';
   import { MyService } from './my-service.service';

   @Component({
     selector: 'app-component1',
     template: `
       <button (click)="setValue()">Set Value</button>
     `,
   })
   export class Component1 {
     constructor(private myService: MyService) {}

     setValue(): void {
       this.myService.setMyVariable('Hello, Angular!');
     }
   }

   // component2.component.ts
   import { Component } from '@angular/core';
   import { MyService } from './my-service.service';

   @Component({
     selector: 'app-component2',
     template: `
       <p>{{ value }}</p>
     `,
   })
   export class Component2 {
     value: string;

     constructor(private myService: MyService) {}

     ngOnInit(): void {
       this.value = this.myService.getMyVariable();
     }
   }

2. Использование @Input и @Output декораторов:
- В компоненте, откуда необходимо передать значение, создайте переменную и пометьте ее декоратором @Output.
- В компоненте, куда необходимо передать значение, создайте переменную и пометьте ее декоратором @Input.
- В компоненте, откуда необходимо передать значение, используйте событие с помощью метода emit() для передачи значения переменной.
- В компоненте, куда необходимо передать значение, используйте свойство @Input() для получения значения переменной.

Пример:

   // component1.component.ts
   import { Component, Output, EventEmitter } from '@angular/core';

   @Component({
     selector: 'app-component1',
     template: `
       <button (click)="setValue()">Set Value</button>
     `,
   })
   export class Component1 {
     @Output() valueChange = new EventEmitter<string>();

     setValue(): void {
       this.valueChange.emit('Hello, Angular!');
     }
   }

   // component2.component.ts
   import { Component, Input } from '@angular/core';

   @Component({
     selector: 'app-component2',
     template: `
       <p>{{ value }}</p>
     `,
   })
   export class Component2 {
     @Input() value: string;
   }

   <!-- app.component.html -->
   <app-component1 (valueChange)="value = $event"></app-component1>
   <app-component2 [value]="value"></app-component2>

В обоих случаях, переменная из компонента 1 будет передана в компонент 2, и ее значение будет отображено или доступно в компоненте 2. Выбор способа зависит от требований вашего приложения.