ngrx：包含表单标签的组件应该是展示性的还是容器性的？答案

【问题标题】：ngrx: should component comprising form tag be presentational or container?ngrx：包含表单标签的组件应该是展示性的还是容器性的？
【发布时间】：2017-06-16 17:17:20
【问题描述】：

我尝试遵循presentational and container 组件的概念。

场景很简单。有一些表示组件，包括表单标签和一些与 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 依赖于某些模型类型（此类型由商店操作使用）。这是错误的，但组件需要了解模型类型，因为它将属性（名称，...等）与输入标签绑定。

为了增加我真正的“PresentationalCmp”需要了解一些商店枚举（它由选择 html 标记的值组成）。

那么是不是意味着在其模板中包含表单标签的组件应该是容器，而不是展示？

【问题讨论】：

可能与stackoverflow.com/questions/44533046/…有关？
@Jota.Toledo 正如我从该答案中了解到的那样，如果演示性 cmp 了解某些商店类型或不了解某些商店类型（在该答案中键入 Good），这没什么可怕的？所以我的问题是关于它的。总是表现性被描述为“组件对 Store 一无所知”
归根结底，您的特定应用程序的需求应该超过严格遵守某些约定。虽然从智能组件中分离出视图组件作为一般原则是有意义的，但在某些时候对规则做出例外肯定是有意义的。我的建议是不要想太多。

标签： angular angular2-template ngrx

【解决方案1】：

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

使用商店知道的接口/类是可以的，特别是当它们代表数据模型的实体时。为什么？好吧，打字稿！通常，您的商店应该只包含 POJO，您可以通过接口定义它们。在这种情况下，再次使用 POJO 接口传递数据是完全正常的。

【讨论】：