Angular:在不同的根中重用reducer和选择器(不使用redux)

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

@Injectable({
  providedIn: 'root'
})
export class StateService {
  private state: any = {};

  constructor() { }

  // 定义reducer函数来处理状态更新
  reducer(action: any): void {
    // 根据action类型更新状态
    switch (action.type) {
      case 'UPDATE_DATA':
        this.state.data = action.payload;
        break;
      // 添加其他的action类型和状态更新逻辑
    }
  }

  // 定义选择器函数来获取状态
  selector(): any {
    return this.state;
  }
}

import { Component } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="updateData()">Update Data</button>
    <div>{{ data }}</div>
  `
})
export class AppComponent {
  data: any;

  constructor(private stateService: StateService) { }

  updateData(): void {
    // 调用reducer函数更新状态
    this.stateService.reducer({ type: 'UPDATE_DATA', payload: 'New Data' });
  }

  ngOnInit(): void {
    // 使用选择器函数获取状态
    this.data = this.stateService.selector().data;
  }
}

import { Component } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'app-other-component',
  template: `
    <div>{{ data }}</div>
  `
})
export class OtherComponent {
  data: any;

  constructor(private stateService: StateService) { }

  ngOnInit(): void {
    // 使用选择器函数获取状态
    this.data = this.stateService.selector().data;
  }
}