yarn ng generate component components/day-3/step-1 --selector="exp-day-3-step-1" --standalone --inline-template --inline-style --skip-tests

import { Component, Injectable, inject, signal } from '@angular/core';

/**
 * 1. ИЗОЛИРОВАННЫЙ СЕРВИС (Бизнес-логика / Шина данных)
 * Декоратор @Injectable заявляет рантайму Angular, что этот класс можно внедрять.
 */
@Injectable(
  // providedIn: 'root' НЕ пишем, если нам нужен локальный стейт,
  // привязанный строго к ветке этого компонента, а не глобальный синглтон.
)
export class CustomLoggerService {
  // Реактивный лог, к которому получат доступ все, кто внедрит сервис
  logs = signal<string[]>(['[System]: Инициализация локального инжектора']);

  addLog(message: string) {
    this.logs.update(current => [...current, `[${new Date().toLocaleTimeString()}]: ${message}`]);
  }
}

/**
 * 2. ГЛУБОКО ВЛОЖЕННЫЙ ДОЧЕРНИЙ КОМПОНЕНТ (Day3Step1Child)
 */
@Component({
  selector: 'exp-day-3-step-1-child',
  standalone: true,
  imports: [],
  template: `
    <div class="lab-monitor stack1">
      <h4>👶 Глубокий ребенок (Day3Step1Child)</h4>
      <p style="font-size: 12px; color: #bbb;">
        Я нахожусь на глубине дерева, у меня нет пропсов или колбэков, но я пишу напрямую в логгер.
      </p>
      <button (click)="sendAction()" class="btn">Запустить импульс из ребенка</button>
    </div>
  `,
})
export class Day3Step1Child {
  // Настоящий аналог useContext() в Angular 20+.
  // Функция inject() ищет CustomLoggerService вверх по иерархии инжекторов.
  private logger = inject(CustomLoggerService);

  sendAction() {
    this.logger.addLog('⚡ Импульс сгенерирован внутри Day3Step1Child');
  }
}

/**
 * 3. РОДИТЕЛЬСКИЙ КОМПОНЕНТ (КОНТЕЙНЕР ШАГА)
 */
@Component({
  selector: 'exp-day-3-step-1',
  standalone: true,
  // Импортируем дочерний компонент в скоуп standalone шаблона
  imports: [Day3Step1Child],
  // РЕГИСТРАЦИЯ ПРОВАЙДЕРА: Создает инстанс сервиса на уровне этого компонента и его детей.
  // Это точечный аналог <Context.Provider value={...}>, но без раздувания HTML-дерева!
  providers: [CustomLoggerService],
  template: `
    <div class="lab-sandbox dark stack1">
      <h3>🅰️ День 3: Шаг 1 — Движок DI и Функция inject()</h3>

      <button (click)="addParentLog()" class="btn">Добавить лог из родителя</button>

      <!-- Вывод логов, которые пишут и родитель, и ребенок в один инстанс класса -->
      <div class="lab-monitor stack1">
        <h4>📊 Локальный логгер инжектора (NodeInjector):</h4>
        <ul style="list-style: none; padding: 0; margin: 0; font-size: 13px;">
          @for (log of logger.logs(); track $index) {
            <li>{{ log }}</li>
          }
        </ul>
      </div>

      <!-- Никаких пропсов и колбэков! Ребенок сам возьмет логгер из контекста DI -->
      <exp-day-3-step-1-child />
    </div>
  `,
})
export class Day3Step1 {
  // Внедряем тот же самый инстанс логгера, который унаследует и ребенок
  protected logger = inject(CustomLoggerService);

  addParentLog() {
    this.logger.addLog('🏗️ Действие зафиксировано в родителе Step1');
  }
}

yarn ng generate component components/day-3/step-2 --selector="exp-day-3-step-2" --standalone --inline-template --inline-style --skip-tests

import { Component, Injectable, inject, signal, computed } from '@angular/core';

/**
 * 1. ГЛОБАЛЬНЫЙ СИНГЛТОН-СТОР (Service-as-a-Store паттерн)
 * providedIn: 'root' гарантирует, что Angular создаст ровно ОДИН инстанс 
 * этого класса на все приложение и уничтожит его только при закрытии вкладки.
 */
@Injectable({
  providedIn: 'root'
})
export class SandboxStoreService {
  // Приватное состояние (Инкапсуляция данных)
  private readonly _isEngineOnline = signal<boolean>(true);
  private readonly _subRoutinesCount = signal<number>(5);

  // Публичное состояние в режиме Read-Only
  isEngineOnline = this._isEngineOnline.asReadonly();
  subRoutinesCount = this._subRoutinesCount.asReadonly();

  // Вычисляемое состояние на уровне Стора (Computed Node в ациклическом графе)
  systemStatus = computed(() => {
    console.log('🟢 [Global Store Computed]: Вычисляю системный статус...');
    return this._isEngineOnline() 
      ? `⚙️ Рантайм Активен. Процессов в пуле: ${this._subRoutinesCount()}` 
      : '🔴 Рантайм Остановлен. Внимание.';
  });

  // Действия (Actions) для изменения состояния
  toggleEngine() {
    this._isEngineOnline.update(state => !state);
  }

  addSubRoutine() {
    if (this._isEngineOnline()) {
      this._subRoutinesCount.update(count => count + 1);
    } else {
      console.warn('⚠️ Невозможно добавить процесс: ядро системы выключено!');
    }
  }
}

/**
 * 2. КОМПОНЕНТ ПУЛЬТА УПРАВЛЕНИЯ (Day3Step2)
 */
@Component({
  selector: 'exp-day-3-step-2',
  standalone: true,
  imports: [],
  // providers: [...] НЕ пишем, иначе мы перезапишем глобальный инстанс локальным!
  template: `
    <div style="padding: 20px; border: 2px dashed #3498db; font-family: monospace; margin-top: 20px;">
      <h3>🅰️ День 3: Шаг 2 — Паттерн "Сервис как Стор" (Singleton)</h3>

      <div style="background: #2c3e50; color: #fff; padding: 15px; border-radius: 4px; margin-bottom: 15px;">
        <h4>📊 Монитор Глобального Состояния:</h4>
        <p>Текущий статус: <strong>{{ store.systemStatus() }}</strong></p>
        <p>Ядро онлайн: <strong [style.color]="store.isEngineOnline() ? '#0f0' : '#ff3333'">{{ store.isEngineOnline() }}</strong></p>
      </div>

      <div>
        <button (click)="store.toggleEngine()">1. Переключить Питание Ядра</button>
        <button (click)="store.addSubRoutine()" style="margin-left: 10px;">2. Запустить Sub-Routine</button>
      </div>

      <p style="color: #bbb; font-size: 12px; margin-top: 15px;">
        *🔬 Этот стор полностью изолирован от UI-разметки. Изменение питания ядра не триггерит тяжелые вычисления в других компонентах.
      </p>
    </div>
  `,
})
export class Step2 {
  // Внедряем глобальный стор одной строчкой через inject().
  // Шаблон компонента имеет прямой доступ к readonly сигналам стора.
  protected store = inject(SandboxStoreService);
}