Question

情景很简单。有一些表示组件包括表单标签和一些与Store交互的容器组件。

@Component({
    selector: "presentational",
    template: 
`
<form>
    <input [(ngModel)]="model.name" />
    <button (click)="onSubmit()">Send</button>
</form>
`,
})
export class PresentationalCmp { 
    private model: Model;
    @Output() emitter = new Emitter<Model>();
    onSubmit() {
        this.emitter.emit(this.model);
    }
}

@Component({
    selector: "container",
    template: "<presentational (emitter)="addModel($event)"></presentational>"
})
export class ContainerCmp {
    addModel(model: Model){ 
        this.store.dispatch(..) //send model to server
    }
}

我发现这种方法合乎逻辑。但有一个明显的问题。我的PresentationalCmp取决于某些Model类型（Store类型使用此类型）。这是错误的，但组件需要了解Model类型，因为它将属性（名称，...等）与输入标记绑定在一起。

另外我真正的“PresentationalCmp”需要注意一些Store枚举（它由select html标签的值组成）。

这是否意味着在其模板中包含表单标记的组件应该是容器，而不是表示？

Answer 1

什么是“对商店一无所知”是指商店或任何其他商店相关信息不是通过构造函数注入的。因此，哑组件获取/发送信息的唯一方法是通过输入/输出属性。

使用商店知道的接口/类是可以的，特别是如果它们代表数据模型的权利。为什么？打字稿！通常，您的商店应该只包含POJO，您可以通过界面定义它们。在这种情况下，使用POJO接口传递数据也是完全正常的。

ngrx：包含表单标签的组件应该是演示文稿还是容器？

1 个答案: