时间戳

首页 > 解决方案 > 我们应该如何定义具有子状态但没有自己的属性的状态的 StateModel？

angular - 我们应该如何定义具有子状态但没有自己的属性的状态的 StateModel？

问题描述

假设我们有一个类似于下面示例的状态，但具有更多属性。

export interface SomeStateModel {
    ThingAProp01 : string;
    ThingAProp02 : string;
    ThingAProp03 : string;
    ThingBProp01 : string;
    ThingBProp02 : string;
    ThingBProp03 : string;
    ThingCProp01 : string;
    ThingCProp02 : string;
    ThingCProp03 : string;
}

@State<SomeStateModel>({

    name     : 'someState',
    defaults : {
        ThingAProp01 : 'some value',
        ThingAProp02 : 'some value',
        ThingAProp03 : 'some value',
        ThingBProp01 : 'some value',
        ThingBProp02 : 'some value',
        ThingBProp03 : 'some value',
        ThingCProp01 : 'some value',
        ThingCProp02 : 'some value',
        ThingCProp03 : 'some value'
    }

})
@Injectable()
export class SomeState{}

维护和滚动可能会变得非常艰巨，这将使我们想要创建sub states可能看起来像这样的东西。

@State<ThingAStateModel>({
    name     : 'thingA',
    defaults : {
        Prop01: 'some value',
        Prop02: 'some value',
        Prop03: 'some value'
    }
})
@Injectable()
export class ThingAState{}


@State<ThingBStateModel>({
    name     : 'thingB',
    defaults : {
        Prop01: 'some value',
        Prop02: 'some value',
        Prop03: 'some value'
    }
})
@Injectable()
export class ThingBState{}


@State<ThingCStateModel>({
    name     : 'thingC',
    defaults : {
        Prop01: 'some value',
        Prop02: 'some value',
        Prop03: 'some value'
    }
})
@Injectable()
export class ThingCState{}

然后像这样在我们的状态下使用它们

@State<????????>({

    name     : 'someState',
    children : [
        ThingAState,
        ThingBState,
        ThingCState
    ]

})
@Injectable()
export class SomeState{}

如果您没有注意到我替换<SomeStateModel>为，因为我不知道创建子状态的文档<????????>中这样的状态模型应该是什么样子。据我了解，NGXS 会自动将子状态作为属性处理，而无需在父状态的选项中定义它们。在该示例中，它们仍然具有在状态模型中定义的父状态上定义的属性，不包括子状态的模型。如果我们想要拆分的数据留下没有自己属性的状态，我们应该如何处理状态模型？如果我需要做defaultsSomeState另一个状态的子状态消除了该状态的属性和状态模型？我敢肯定我不是唯一一个遇到这种情况的用户，但是我似乎无法通过谷歌搜索正确的东西来找到答案，有人可以解释如何做到这一点吗？

标签： angulartypescriptngxs

解决方案

在这种情况下，您可以使用extends

在 TypeScript 中，我们可以使用常见的面向对象模式。基于类的编程中最基本的模式之一是能够扩展现有类以使用继承创建新类。

例子

export class SubStateModel {
  public items!: string[];
}

const defaults = {
  items: [],
};

@State<SubStateModel >({
  name: 'marketplace',
  defaults,
})
@Injectable()
export class SubState extends MainState { }

资源extends

推荐阅读