在打字稿角度中使用数据通用创建状态管理

Question

创建了可以接受任何类型的通用 StateManagierService，在状态更改时，用户可以获取新的状态和数据（如果有）。但看我错过了一些东西。

export class StateManagierService<T> {
  private _state$: BehaviorSubject<T>;

  protected constructor (initialState: T) {
    console.log("initialState",initialState)
    this._state$ = new BehaviorSubject(initialState);
  }

  get state$ (): Observable<T> {
    return this._state$.asObservable();
  }

  get state (): T {
    return this._state$.getValue();
  }

  changeState (nextState: T): void {
    if(this.state === nextState || nextState === null) return;
    this._state$.next(nextState);
  }
}

用户可以创建的不同状态

export enum state1{
    A =1,
    B
}

Wraper类会创建obj并可以添加更多数据|属性

export class Wrap {
    constructor(stateId: state1, data?:any){
        console.log("stateId", stateId, data)
    }
}

@Injectable({
    providedIn: 'root'
})
export class serviceImpl extends StateManagierService<Wrap> {
    constructor(){
        super(new Wrap(state1.A, 'text1')); // Expecting Wrap object to set but not
    }

}

测试服务检查

class hello {
    constructor(private serviceImpl: serviceImpl){

    }
    one(){
        this.serviceImpl.state$.subscribe(res=>{
          console.log('res', res) // Expecting Wrap object  What im doing wrong
        })
        this.serviceImpl.changeState(new Wrap(state1.B, 'text23'))
    }
}

Answer 1

为了让 Angular 通过快捷方式初始化构造函数中的属性，我们需要像

private stateId: state1

那样定义它，这样做可以解决你的问题！

export class Wrap {
  constructor(private stateId: state1, private data?: any) { // <- changed here!
    console.log('stateId', stateId, data);
  }
}

stackblitz 演示